容器外的文本中心

时间:2017-11-27 13:02:29

标签: html css css3

是否可以将文本置于css中心并使其从左右扩展而不使用javascript并且不知道它有多大?

在我的尝试中,文本总是向右扩展。

.container {
  width: 90px;

  border: 1px solid red;
  
  text-align: center;
  white-space: nowrap;
  overflow: visible;
}
  <div class="container">Hello very long text</div>
  <div class="container">Small text</div>

2 个答案:

答案 0 :(得分:3)

你可以做的是下面的解决方案:制作容器position: relative,在其中放置span并将下面的设置应用于该范围以使其居中(位置:绝对等) 你必须给容器一些高度才能使它工作。

.container {
  width: 90px;
  border: 1px solid red;
  white-space: nowrap;
  overflow: visible;
  text-align: center;
  position: relative;
  height: 1.4em;
}

.container>span {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%)
}
<div class="container"><span>Hello very very very long text</span></div>
<div class="container">Small text</div>

答案 1 :(得分:2)

您可以使用 Flexbox 执行此操作:

&#13;
&#13;
.container {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
  width: 90px;
  border: 1px solid red;
  /*text-align: center;*/
  white-space: nowrap;
  overflow: visible;
}
&#13;
<div class="container">Hello very long text</div>
<div class="container">Small text</div>
&#13;
&#13;
&#13;