如何让它一行文字的时候垂直居中
<style type="text/css">
.ellipsis-2 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #fff;
}
</style>
<div style="padding: 0 10px;height: 50px;background-color: #7092BE;width: 200px;">
<p class="ellipsis-2">
一行文字时垂直居中,两行文字时换行
</p>
</div>
在div上面使用flex
height: 200px;
width: 200px;
background-color: red;
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
word-break: break-all;
在div的样式里添加line-height:50px,保证这个值与你的固定高度一致。
你这个表达的不明确,一般文字不会直接写在div,如果这样其实就是块级元素垂直居中的问题了;但是我看你好像又要表达行内元素垂直居中的问题。。
.test{
hight:20px;
line-height:20px;
}
<div class="test">
测试:块级元素内的单行文本垂直居中设置;第一,设置块级元素的高度height属性,第二,设置块级元素的line-height属性,其属性值和height属性值相同;
注意,这里仅仅是设置单行文本!!!
</div>