html - 如何使div中的垂直文本居中？

Question

我正在尝试使用无序列表制作一个简单的条形图。我在每个栏中都有文本并旋转它以使其垂直。该图是响应式的，因此当屏幕缩小时条形的宽度会缩小。

<div id="chart">
  <ul id="bars">
    <li><div data-percentage="85" class="bar"><span>HTML</span></div></li>
    <li><div data-percentage="85" class="bar"><span>CSS</span></div></li>
    <li><div data-percentage="60" class="bar"><span>jQuery</span></div></li>
    <li><div data-percentage="60" class="bar"><span>PHP</span></div></li>
    <li><div data-percentage="35" class="bar"><span>MySQL</span></div></li>
    <li><div data-percentage="85" class="bar"><span>Worpress</span></div></li>
  </ul>
</div>

关联的 CSS 和 jQuery 可以在 jsFiddle 中找到:http://jsfiddle.net/8QVa6/

当条形宽度减小时，文本会向右截断，知道我缺少什么 CSS 以使其始终居中吗？

Answer 1

我会在标签 span 元素上使用 top: 50% 和 position: relative。它需要是 display: block 才能工作。

#chart #bars li .bar span {
    color: #fff;
    display: block;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    position: relative;
    top: 50%;

    margin-top: -10px; /* about half line height */
}

margin: -10px 用于补偿旋转后的行高。如果标签没有完全居中，如果情况还不错，您可以将其保留。

查看 fork :http://jsfiddle.net/Nb53Z/2/