CSS:居中放置页面元素
2017-06-09 15:56
176 查看
最近入了前端的坑,啊,改学前端了,长路漫漫.....
块级元素文字居中放置:
1.使用text-align性质可以居中显示块级元素中的文字
2.设置包含文字容器的margin值:
把margin-left和margin-right设为auto时,该元素则会相对于父元素居中显示,注意,需设置元素h1的width属性,否则元素h1实际上占据了body元素的整个宽度,即使设置margin也并不会看到居中的效果
表格居中放置
对表格使用text-align只能是使得表格单元格中的文本居中,并不能使整个表格位于页面居中位置
图片居中放置
水平
1.在img元素外包装一个div标签,使其成为块级元素
CSS规则如下:
2.不包装div标签,把父元素body的padding-left属性值设置为50%,然后取需要居中元素的宽度值一半,将该值取负赋给margin-left属性
<img src="../img/6.jpg" alt="The X" class="blocking" />
垂直:
1.使用position属性
img{
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
}
2.文字和图片(包括多张图片)都居中显示,就需要把所有内容放在一个div元素中
<div id="centerFrame">
<p>Lorem ipsum dolor sit amet,consectetuer adipising elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam.Lorem ipsum dolor sit amet,consectetuer adipising elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam.</p>
<img src="../img/7.jpg" alt="The Summer" width="450px" height="400px" />
</div>
块级元素文字居中放置:
1.使用text-align性质可以居中显示块级元素中的文字
h1{ text-align: center; }
2.设置包含文字容器的margin值:
把margin-left和margin-right设为auto时,该元素则会相对于父元素居中显示,注意,需设置元素h1的width属性,否则元素h1实际上占据了body元素的整个宽度,即使设置margin也并不会看到居中的效果
h1{ width: 400px; margin:0 auto; background:#666; color: #fff; }
表格居中放置
对表格使用text-align只能是使得表格单元格中的文本居中,并不能使整个表格位于页面居中位置
table{ width: 50%; margin: 0 auto; text-align: left; }
图片居中放置
水平
1.在img元素外包装一个div标签,使其成为块级元素
<div class="flagicon"> <img src="../img/5.jpg" alt="The Hole" height="400px" width="400px" /> </div>
CSS规则如下:
.flagicon{ text-align: center; }
2.不包装div标签,把父元素body的padding-left属性值设置为50%,然后取需要居中元素的宽度值一半,将该值取负赋给margin-left属性
body{ padding-left: 50%; } img{ margin-left: -200px; }3.改变margin和display属性
.blocking{ display: block; margin: 0 auto; }
<img src="../img/6.jpg" alt="The X" class="blocking" />
垂直:
1.使用position属性
img{
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
}
2.文字和图片(包括多张图片)都居中显示,就需要把所有内容放在一个div元素中
<div id="centerFrame">
<p>Lorem ipsum dolor sit amet,consectetuer adipising elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam.Lorem ipsum dolor sit amet,consectetuer adipising elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam.</p>
<img src="../img/7.jpg" alt="The Summer" width="450px" height="400px" />
</div>
#centerFrame{ width: 450px; position: absolute; top:50%; left: 50%; margin-top: -200px; margin-left: -225px; }
相关文章推荐
- 不用table,两种div+css页面元素居中方法
- css实现高度不固定的div元素模块在页面中水平垂直居中
- 页面元素居中 css获取页面中心位置
- css实现页面元素居中
- CSS:如何让元素在页面中水平垂直居中?
- CSS控制元素的在页面中水平、垂直居中
- CSS中元素水平居中显示的方法
- 如何通过CSS实现元素居中(一)
- Css Margin 实现页面居中
- CSS实现 DIV在页面垂直居中两例
- ASPX页面中不放置Form元素的问题
- CSS在页面布局中实现div垂直居中的方法总结(转)
- CSS在页面布局中实现div水平居中的方法总结(转)
- MicroSoft Live 和GOOGLE个性主页 页面元素可拖拽放置的实现原理(2)
- CSS + DIV 布局(页面居中)
- Css实现元素的垂直居中
- PHP学习之Smarty+CSS+DIV页面居中问题
- AJAX--UpdateProgress设置CSS元素POSITION的使动画居中 & loading的Info
- MicroSoft Live 和GOOGLE个性主页 页面元素可拖拽放置的实现原理(2)
- [原创] 纯css漂浮广告页面垂直居中(兼容IE6、IE7、Firefox2.0)