Question

我希望通过下划线和上划线垂直居中文字。文本元素位于div内，该div位于绝对位置且具有未知（可变）高度。文本的字体大小和水平位置也必须是可变的。

换句话说：我想定位文本，使下划线和上划线之间的中心正好位于包含div的中心。

此外，我想在文本前面显示一个矩形（使用div）：

<div class="container">
  <div class="rectangle"></div>
  <div class="text">Text</div>
</div>

以下是一个示例：http://codepen.io/zabbarob/pen/CHxLe

* { margin: 0; padding: 0; border: 0; }

.container {
  position: absolute; top: 5px; height: 25px;
  zoom: 800%; /* debugging */
  vertical-align: middle;
}

.rectangle {
  display: inline-block;
  width: 50px; height: 100%;
  background-color: green;
}

.text {
  display: inline-block;
  text-decoration: underline overline;
  font-size: 20px;
  position: absolute; left: 50px;
  background: lightgreen;
  /* center vertically by underline and overline */
  top: 0; bottom: 0;
  line-height: 25px;
}

Answer 1

嗯，而不是使用实际的上划线/下划线（这可能是一个令人头疼的定制），你是否考虑使用边框顶部/底部模仿它？因此，您可以按如下方式修改文本的CSS定义：

.text {
    display: inline-block;
    /*text-decoration: underline overline;*/
    font-size: 20px;
    position: absolute; left: 50px;
    background: lightgreen;
    /* center vertically by underline and overline */
    top: 0; bottom: 0;
    line-height: 23px; /* Height of the element beside it, minus 2px for the borders */
    border-top:1px solid #000;
    border-bottom:1px solid #000;
}

这是一个modified CodePen来演示。根据您的要求，这可能不是最佳的（例如，带缩放的边框刻度，而下划线没有），但它至少可以为您提供一种不同的方法来解决问题。

希望这有帮助！如果您有任何问题，请告诉我。

Answer 2

您是否尝试过使用此处列出的方法：http://css-tricks.com/centering-in-the-unknown/？

始终适合我。

希望这有帮助

通过下划线和上划线中心垂直居中文本

2 个答案: