如何使用CSS对齐具有不同宽度的文本？

Question

我有一个部分包含不同宽度的文本。

.demo h1 {
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  width: 100%;
  color: #707070;
  text-align: justify;
}

.demo p {
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  width: 100%;
  color: #707070;
}

.demo {
  text-align: justify;
}

<div class="demo">
  <h1>Dene do kontaktu</h1>
  <p>Skontaktuj się</p>
  <p>Tel: 500500500</p>
  <p>Email: kontakt@kontakt.pl</p>
</div>

在这里可以看到预期的结果：

Answer 1

如果您想使文本居中，请使用text-align: center属性。

从其他CSS属性中删除文本并编辑演示

.demo {
  text-align: center;
}

在这里拨弄：https://jsfiddle.net/xhe5mgc1/1/

Answer 2

如果要居中文本，请使用text-align: center，而不要使用justify。我还优化了CSS。

.demo {
  color: #707070;
  font-size: 12px;
  font-family: Roboto;
  text-align: center;
}

.demo h1 {
  font-size: 13px;
  font-weight: 400;
}

.demo .tel {
  color: #00bb11;
}

<div class="demo">
  <h1>Dene do kontaktu</h1>
  <p>Skontaktuj się</p>
  <p>Tel: <span class="tel">500500500</span></p>
  <p>Email: kontakt@kontakt.pl</p>
</div>

Answer 3

尝试使用text-align: center;

Answer 4

您必须将.demo类中的“ text-align”的值更改为center

.demo h1 {
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
  width: 100%;
  color: #707070;
}

.demo p {
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  width: 100%;
  color: #707070;
}

.demo {
  text-align: center;
}

<div class="demo">
  <h1>Dene do kontaktu</h1>
  <p>Skontaktuj się</p>
  <p>Tel: 500500500</p>
  <p>Email: kontakt@kontakt.pl</p>
</div>