您的位置：首页 > Web前端 > CSS

div内容水平居中、垂直居中

2016-12-01 11:20 429 查看

水平居中：text-align:center;

垂直居中：display:table-cell;vertical-align:middle;

css代码：

.tableDiv{
display:table;
}
.tableCellDiv{
display:table-cell;vertical-align:middle;text-align:center;
}

html代码片段：

<div id="imgLayout" style="height: 180px;display:none;">
<div style="float:left;">
<%--图位二--%>
<div class="tableDiv" style="height: 86px;width: 200px;border:1px solid black;">
<div class="tableCellDiv" >图位一<br/>530×230</div>
</div>
<div style="width: 202px;">
<%--图位二--%>
<div class="tableDiv" style="height: 86px;width: 99px;border:1px solid black;float:left;">
<div class="tableCellDiv" >图位二<br/>256×230</div>
</div>
<%--图位三--%>
<div class="tableDiv" style="height: 86px;width: 99px;border:1px solid black;float:left;">
<div class="tableCellDiv" >图位三<br/>256×230</div>
</div>
</div>
</div>
<div style="float:left;">
<%--图位四--%>
<div class="tableDiv" style="height: 86px;width: 200px;border:1px solid black;">
<div class="tableCellDiv" >图位四<br/>410×230</div>
</div>
<%--图位五--%>
<div class="tableDiv" style="height: 86px;width: 200px;border:1px solid black;">
<div class="tableCellDiv" >图位五<br/>410×230</div>
</div>
</div>
<div style="float:left;">
<%--图位六--%>
<div class="tableDiv" style="height: 174px;width: 97px;border:1px solid black;">
<div class="tableCellDiv" >图位六<br/>260×460</div>
</div>
</div>
</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html css 水平居中垂直居中

相关文章推荐

新的分享

章节导航