我使用下面的css在多行时对齐文本中间和左边,但是如何在一行中对齐文本中间和中心?
.my-text {
border: 1px solid black;
width: 400px;
height: 160px;
vertical-align: middle;
display: table-cell;
overflow: hidden;
line-height: 20px;
padding: 20px;
}

<div class="my-text">
carpe diem
</div>
<div class="my-text">
carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem
</div>
&#13;
答案 0 :(得分:10)
<span>
。inline-block
并将其文字对齐方式设为left
。
.my-text {
border: 1px solid black;
width: 400px;
height: 160px;
vertical-align: middle;
display: table-cell;
overflow: hidden;
line-height: 20px;
text-align: center;
padding: 10px;
}
.my-text span {
display: inline-block;
vertical-align: top;
text-align: left;
}
&#13;
<div class="my-text">
<span>carpe diem</span>
</div>
<div class="my-text">
<span>carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem</span>
</div>
&#13;
答案 1 :(得分:-1)
我建议使用JQuery解决方案:
$(".my-text").keypress(function() {
if($(this).val().length >= 50) {
$(this).css("text-align", "left");
}
else {
$(this).css("text-align", "center");
}
});
可能有更好的选择,因为这个显然不是防水的,但它应该有所作为。