将 div 中的文本水平居中

水冷却器 v2

我观察到text-align: center，在从其容器块元素的边界（div在这种情况下）的文本左侧和右侧创建相等的空间时，也会将文本的对齐方式更改为center. 在这方面，它违反了单一职责主体。

和 text-align: center

div {
  box-sizing: border-box;
  width: 600px;
  height: 500px;
  border: 4px solid red;
  padding: 0 150px 0 150px;
  
  display: table-cell;
  vertical-align: middle;
  
  text-align: center;
}

<div>This is a long piece of text that runs into many lines of reading. Some people like to sleep, and some like to drink water. This is looking like a poem. It is even aligned like one. What a pity!</div>

对于普通读者来说，有几点需要注意：

我不是在问如何垂直对齐文本。
我知道如果我div在一个div. 我不是在为我正在尝试解决的问题寻求替代解决方案。我在问是否有办法做到这一点，而无需求助于诸如使用 contains 之类的杂乱无章的方法div。

杂乱无章：在 div 中放入一个 div

body > div {
  box-sizing: border-box;
  width: 600px;
  height: 500px;
  border: 4px solid red;
  
  display: table-cell;
  vertical-align: middle;
  
  padding: 0 150px 0 150px;
}

div > div {
  text-align: justify;
  
  margin: 0 auto;
}

<div>
  <div>This is a long piece of text that runs into many lines of reading. Some people like to sleep, and some like to drink water. This is NOT looking like a poem. Oh, so nice! But it uses a hack, what the fack!</div>
<div>

我想知道是否有一种方法可以在包含块（例如 div）中水平居中文本，同时将文本对齐方式保留为left或justify。

k-螺母

不，没有，而且有充分的理由。因为如果 CSS 引擎本身有一个这样的内置解决方案，而无需您设置填充，谁来决定文本内容的宽度？

最好的办法是做你已经在做的事情。也就是说，在左侧和右侧设置填充，然后离开text-align: justify（或left随意）。那会做你想要的。

您正在考虑的方法的问题在于，您需要以某种方式定义居中文本的宽度。在您的示例中，您正在设置padding和并由此width隐式设置中间文本的宽度。

确保某些东西只在容器中使用预定义的唯一真正的解决方案实际上是为它创建一个 DOM 元素。这意味着div如果您不想使用padding/ widthhack ，您可能无法避免这里的额外内容。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。