css – So zentrieren Sie einzeiligen und mehrzeiligen Text
过去多啦不再A梦2017-05-16 13:26:34
0
8
1762
Wie im Bild gezeigt,
Wenn nur eine Textzeile vorhanden ist, wird der Text vertikal zentriert. Wenn zwei Textzeilen vorhanden sind, wird der Text ebenfalls vertikal zentriert.
先看效果图
然后是代码实现
从你的布局来看,应该是这样的:左边的文字与右边时间都垂直居中。
一个简单的方法就是:如
布局:<p><span>gfghghg</span><span>2017-12<s/pan></p>
css:
p{display: table;}
span{display: table-cell; vertical-align: middle;}
可以试下
包含了各种解决方案,传送门
<p class="" style="display: table;height: 100px;">
根据你提供的图来看,每一条内容都是定高的,所以设置最外层父元素line-height等于自身高度 里面的p标签 display:inline-block;vertical-align: middle;
代码结构
可以看下我总结的这些方法。传送门
题主需要的就是多行文字垂直居中的方法吧。我总结的文章里面有典型的方法可以实现,例子如下。
http://codepen.io/zengkan0703...
不知道是题主踩的我的答案吗?如果是,我希望能回答我为什么。如果不是,上面的例子应该能解决你的需求。