css - 如何实现单行与多行文字的居中

问题描述

如图所示，

当本行只有一行时，文字垂直居中， 当有两行文字时，同样使文字垂直居中，如何做到呢？

PS: 不用flex.

问题解答

先看效果图然后是代码实现

<style> .message-box{width: 500px;height: 500px;background: #333; } .message-item{background: #666;padding: 20px;width: 100%;height: 100px;display: table;box-sizing: border-box; } .item-title{width: 60%;margin: 0;display: table-cell;vertical-align: middle; } .item-time{width: 40%;margin: 0;display: table-cell;vertical-align: middle;text-align: right; }</style><p class='message-box'> <p class='message-item'><p class='item-title'>课程下单成功</p><p class='item-time'>2017-02-01 10:30</p> </p> <p class='message-item'><p class='item-title'>您报名的活动即将开始【作品集日-一起来看展】</p><p class='item-time'>2017-02-01 10:30</p> </p></p>回答2：

从你的布局来看，应该是这样的:左边的文字与右边时间都垂直居中。一个简单的方法就是：如布局：<p><span>gfghghg</span><span>2017-12<s/pan></p>css：p{display: table;}span{display: table-cell; vertical-align: middle;}

可以试下

包含了各种解决方案，传送门

display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;回答5：

<p class='' style='display: table;height: 100px;'>

<p class='' style='display: table-cell;vertical-align: middle;'>sadfsadf </p> <p class='' style='display: table-cell;vertical-align: middle;'>sadfsadf </p></p>回答6：

<p class='one'> <p class='two>文字 </p></p>

.one { position: relative; }.two { position: absolute; top: 50%; transform: translateY(-50%);回答7：

根据你提供的图来看，每一条内容都是定高的，所以设置最外层父元素line-height等于自身高度 里面的p标签 display：inline-block；vertical-align: middle;代码结构

<ul> <li><p></p><span></span> </li> <li><p></p><span></span> </li> <li><p></p><span></span> </li></ul>回答8：

可以看下我总结的这些方法。传送门题主需要的就是多行文字垂直居中的方法吧。我总结的文章里面有典型的方法可以实现，例子如下。http://codepen.io/zengkan0703...不知道是题主踩的我的答案吗？如果是，我希望能回答我为什么。如果不是，上面的例子应该能解决你的需求。