html - 通过下划线和上划线的中心垂直居中

我想通过下划线和上划线使文本垂直居中。文本元素位于绝对定位的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;
}

最佳答案

嗯，您是否考虑过使用边框的顶部/底部来模仿它，而不是使用实际的上划线/下划线（可能难以自定义）？因此，您可以如下修改文本的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演示。根据您的要求，这可能不是最佳选择（例如，带缩放的边框比例，而下划线则不是），但它至少为您提供了解决问题的另一种方法。

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

关于html - 通过下划线和上划线的中心垂直居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25317102/