共计 807 个字符,预计需要花费 3 分钟才能阅读完成。
提醒:本文最后更新于2018-05-19 11:50,文中所关联的信息可能已发生改变,请知悉!
1、在div css布局中,最常见的问题就是div如何居中的问题。主要利用两个属性来使div居中:
body {TEXT-ALIGN: center;} | |
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } |
首先在body内容区域内定义文本居中,这样所有在body父级元素内的内容就会居中。对于ie浏览器这样设置就可以了,但是火狐浏览器还必须加下面这句,左右让它自动来实现居中。总之,加上这两个css样式就可以实现居中了。不过不建议大家在书写div的时候都嵌套在一个div里,这样如果网页内容过多的话会影响打开速度。可以分开写每个div,然后在需要居中的地方加上MARGIN-RIGHT: auto; MARGIN-LEFT: auto; 就可以了。
2、在div中如何使图片垂直居中
不提倡直接把图片写在网页文件中,应该用背景的方法来实现。例如:
body{BACKGROUND: url(/images/logos.gif) #FFF no-repeat center;}
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者”bottom right”等,也可以直接写数值”50 30″。通过调节间距实现居中。
3、在div中如何使文本垂直居中
使用文本就不能再用图片了,这时可以用增高行距的办法变通实现垂直居中
<div id="center" style="margin-right: auto; margin-left: auto;"> | |
文本垂直居中,背景图片居中 | |
</div> |
说明:
vertical-align:middle;
表示行内垂直居中,我们将行距增加到和整个DIV一样高 line-height:200px;
然后插入文字,就垂直居中了。
垂直居中,也可用如下方法:
align { | |
text-align:center center; | |
} |
或
align { | |
text-align:50% 50%; | |
} |
正文完