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>

可以使用jsFiddle：http://jsfiddle.net/8QVa6/

找到相关的CSS和jQuery

当条形宽度减小时，文字会向右切断，知道我缺少什么CSS以保持整个时间的中心位置？

Answer 1

您在跨度上使用display:inline-table，您需要将display: table;添加到父级

#chart #bars li .bar {
  display: table;
  width: 90%;
  margin-left: 10%;
  margin-bottom:10px;
  position: absolute;
  bottom: 0;
}

Answer 2

我在标签top: 50%元素上使用position: relative和span。它需要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来补偿旋转后的线高。如果标签没有完全居中，那么你可以把它留下来。

见叉子：http://jsfiddle.net/Nb53Z/2/

如何将div中的垂直文本居中？

2 个答案: