如何使多行左對齊時單行文本居中對齊？

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"); 
    } 
}); 

有可能是更好的選擇，因爲這一個顯然是不防水的，但它應該有些做的伎倆。