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

Question

I want to vertically center a text by its underline and overline. The text element is inside a div that is absolutely positioned and has an unknown (variable) height. The text's font size and horizontal position also have to be variable.

In other words: I want to position the text so that the center between underline and overline is exactly at the center of the containing div.

Additionally, I want to display a rectangle (using a div) in front of the text:

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

Here's an example: 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

Hmm, rather than using an actual overline/underline (which could be a bit of a headache to customize), have you considered mimicking it using border top/bottom instead? So you could modify your CSS definition for text as follows:

.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;
}

Here's a modified CodePen to demonstrate. Depending on your requirements, this may not be optimal (for example, border scales with zoom, whereas underline does not), but it does at least give you a different way of approaching the problem.

Hope this helps! Let me know if you have any questions.

Answer 2

Have you tried using the methods outlined here: http://css-tricks.com/centering-in-the-unknown/ ?

Always works for me.

Hope this helps