我在另一个 div 中的 div 中有两个表:
HTML
<div class="container center">
<div class="thing">
<table class="tabel center" style="width:230px">
<tr><td>Example</td></tr>
</table>
</div>
<div class="thing">
<table class="tabel center" style="width:230px">
<tr><td>Example</td></tr>
</table>
</div>
</div>
CSS
.container {
width: 100%;
overflow: hidden;
float: left;
border: 1px solid red;
text-align: center;
}
.tabel {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
.thing {
width: 50%;
float: left;
min-width: 230px;
}
.center {
margin: 0 auto;
}
两个单元格正确居中
[图片被主持人删除]
但是当屏幕的宽度变得太小时,单元格会相互重叠(我想要的),但它们不再居中:
[图片被主持人删除]
所以我希望它们看起来像:
[图片被主持人删除]
最佳答案
您必须删除 float: left;
,设置 display: inline-block;
并消除它们之间的空白。
.thing {
width: 50%;
display: inline-block;
/* float: left; */
min-width: 230px;
vertical-align: top;
}
fiddle :http://jsfiddle.net/3g7xk0sj/1/
关于html - 在 div 中居中 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26337972/