Question

考虑一下：

<div id="point">
    <div class="caption">Caption here</div>
</div>

位置设置在#point：

#point{
    top: 50px;
    left: 50px;
}

现在我希望文本在其周围水平居中。我尝试将div零宽度

#point > .caption{
    width: 0px;
    text-align: center;
}

但显然这不起作用。那么我该如何将文本居中？它不必有两个div。只是我使用了两个div来尝试使它工作。

Answer 1

通过使用transform，我们可以水平（和/或垂直）围绕通常位于其左上角（您正在谈论的那个点）的中心文本。

添加红点（带block类）以显示我们居中的点。

.caption {
  display: inline-block;
  position: absolute;
  top: 50px;
  left: 50px;
  transform: translate(-50%, -50%);
}

.block {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 5px;
  height: 5px;
  background-color: red;
  transform: translate(-50%, -50%);
}

<span class="caption">Caption here</span>
<div class="block"></div>

使用两个元素和相对定位而不是transform的版本：

.caption {
  display: inline-block;
  position: absolute;
  top: 50px;
  left: 50px;
}

.inner {
  position: relative;
  left: -50%;
  top: -0.5em;
}

.block {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 5px;
  height: 5px;
  background-color: red;
  transform: translate(-50%, -50%);
}

<span class="caption"><span class="inner">Caption here</span></span>
<div class="block"></div>

Answer 2

请原谅我的语言，因为它不是很好。你在这段代码中的问题

     #point > .caption{
    width: 0px;
    text-align: center;
}

是宽度元素。因为你错了价值。删除width属性或将值更改为auto。我希望我理解所说的话。祝你好运！

围绕一个点居中文本

2 个答案: