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

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>

- licaomeng

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>

- Mohammad Usman

---

当我在谷歌上搜索这个问题时，我非常不确定它是否可能。但是现在它实现了，哇！不幸的是，我不理解它，但它确实有效。谢谢。 - Ardeshir Izadi

Answer 2

我建议使用 JQuery 解决方案：

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

可能有更好的选择，因为这个显然不防水，但它应该可以稍微解决问题。

- Xariez

---

"length >= 50" 高度依赖于屏幕尺寸、字体大小、字母间距、字体特性、用户缩放设置、辅助功能设置，以及可能的其他因素。许多更改可能会破坏此功能。 - Ardeshir Izadi