居中.jpg
居中是布局中最长用的方式,下面给大家数一下几个最简单的居中方式。童鞋们要多实践试试。
水平居中
- 文本水平居中
在文本的标签加上下面代码就OK了。
text-align:center;
- 标签水平居中
在需要水平居中的标签加上如下两条声明就可以水平居中,一般用于整体居中。注意必须是两条都有。
width:宽度;
margin: 0 auto;
一般inline标签使用方法1,其他的使用方法2。
垂直居中
- 文本垂直居中
- 单行文本垂直居中
在文本的标签设置行高等于容器高度。
height:高度;
line-height:高度;
- 多行文本垂直居中
多行文本上面的方式就无效了,给元素上下添加相同大小的padding值,就能垂直居中了。
padding-top:间距;
padding-bottom:间距;
- 标签垂直居中
标签垂直居中一般只要使用下面一行代码就够了。注意居中元素不能是block标签哦。
vertical-align:middle;