as the picture shows,
When there is only one line in this line, the text is vertically centered. When there are two lines of text, the text is also vertically centered. How to do it?
PS: No need to use flex.
PHP中文网2017-05-16 13:28:34
Look at the renderings first
Then the code implementation
<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>
大家讲道理2017-05-16 13:28:34
Judging from your layout, it should look like this: the text on the left and the time on the right are both vertically centered.
A simple method is:
layout:<p><span>gfghghg</span><span>2017-12<s/pan></p>
css:
p{display: table ;}
span{display: table-cell; vertical-align: middle;}
You can try it
PHPz2017-05-16 13:28:34
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
巴扎黑2017-05-16 13:28:34
<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>
过去多啦不再A梦2017-05-16 13:28:34
<p class="one">
<p class="two>
文字
</p>
</p>
.one {
position: relative;
}
.two {
position: absolute;
top: 50%;
transform: translateY(-50%);
仅有的幸福2017-05-16 13:28:34
According to the picture you provided, each piece of content has a fixed height, so set the line-height of the outermost parent element equal to the p tag display in its own height: inline-block; vertical-align: middle;
Code structure
<ul>
<li>
<p></p><span></span>
</li>
<li>
<p></p><span></span>
</li>
<li>
<p></p><span></span>
</li>
</ul>
给我你的怀抱2017-05-16 13:28:34
You can take a look at these methods I summarized. Portal
What the subject needs is a method to vertically center multi-line text. The article I summarized contains typical methods to achieve this. Examples are as follows.
http://codepen.io/zengkan0703...
I wonder if it was the questioner who disliked my answer? If so, I hope I can be answered why. If not, the above example should solve your needs.