正文
css table-cell实现图文排列水平对齐
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
今天遇到一个样式：图文两列排列。
由于图片大小固定，于是就想到了用table-cell实现。
<div class="container">
<div class="box"><img src="demo.png" /></div>
<div class="box">
<p>今天是周四</p>
<p>今天是9月伊始</p>
<p>今天是2016年的下半年</p>
</div>
</div>
最初css代码如下：
.container{display:table;}
.box{display:table-cell}
但是如果只是简单的这样写，你会发现图片和问题不在同一个水平线上。
可以设置css的行内元素的垂直对齐属性
.box{vertical-align: top;}
设置top是垂直上对齐
middle是垂直居中
其他的以此类推
