各种居中对齐

text-align:center 只对块级元素有效

vertical-align:center 只对行内元素有效

在写样式时，一定记住先使用通配符统一不同浏览器的默认设置。

　　margin:0px;

　　padding:0px;

　　font-size:16px;　　

}

一，单行（块级元素的内容不超过一行：p,div,h1,h2等标签）居中（左右居中，上下居中）

在块级元素中设置，解决办法：

1，line-height:该行的字体大小

2，text-align:center;

----------------

</head>
<body>
　　<div class="warp">
　　　　<p>路上看到<br/>房价收到非独立开发建设劳动法</p>
　　</div>
</body>

=================================================

二，多行（多行中包括块级元素）居中（左右居中，上下垂直居中）

在块级元素中设置属性，解决办法：

在需要居中整个块级元素中设置：

text-align:center;

把其父元素转化成表格，表格的宽度是内容决定，所以这里需要把宽度设置为100%：

display:table;

width:100%;

把居中块级元素转化成表格的单元格：

display:talbe-cell;

表格的单元格时行内元素，所以可以使用垂直居中属性(该属性默认值：baseline)：

vertical-align:center;

如下代码：

*{
　　margin: 0px;
　　padding: 0px;
}
.warp{
　　border: 1px solid red;
　　height: 400px;
　　display: table;
　　width: 100%;
}
.inner{
　　text-align: center; //先设置块级元素居中，块级元素居中才有效。再来转化为表格的单元格。
　　display: table-cell;
　　vertical-align: middle;
}
</style>

<div class="warp">
<div class="inner">
　　<img src="#" width="200px" height="100px">
　　<div>路上看到房价收到非独/div></div>
　　<h2>数量的开发建设独立开发</h2>
</div>

===========================================

猜你喜欢