如何使多行左对齐时单行文本居中对齐？

Question

我在下面的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>

Answer 1

1. 将您的文本包装在一个内联元素中，如<span>。
2. 将其设置为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; 
 
}

<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>

Answer 2

我建议使用jQuery的解决方案：

$(".my-text").keypress(function() { 
    if($(this).val().length >= 50) { 
     $(this).css("text-align", "left"); 
    } 
    else { 
    $(this).css("text-align", "center"); 
    } 
}); 

有可能是更好的选择，因为这一个显然是不防水的，但它应该有些做的伎俩。