Question

我正在使用表格和嵌套的div构建html条形图，并希望在div栏后面立即显示％为文本。

我有一个真正的问题是将这个文本与div垂直居中 - 我已经尝试弄乱垂直对齐/行高和各种显示选项，但无济于事。谁能指出我正确的方向？我需要一个通用的解决方案 - 没有绝对的定位。

html：

<table>
  <tr>
    <td>
      Choice A
      <br>
      <div class="full">
        <div class="a"></div>
      </div>
      <span>50%</span>
    </td>
  </tr>
</table>

css：

td {
  text-align: left;
}
.full {
  background-color: grey;
  width: 250px;
  height: 25px;
  display: inline-block;
  line-height: 25px;
}
.a {
  background-color: red;
  width: 50%;
  height: 100%;
}
span {
  vertical-align: middle;
}

http://jsfiddle.net/2n9aL/

Answer 1

做不同的事情，如

span {
    vertical-align: top;
}

Demo

或者做

span {
    line-height: 25px;
    vertical-align: top;
}

Demo

Answer 2

vertical-align: top;

将是您添加的css规则

Answer 3

首先，答案是完美的，您的HTML也可以添加

span {
        vertical-align: middle; /* As per your code */
        float:right;      /* This for span alignment */
        line-height:25px; /* This for center text */
     }

Answer 4

试试这个：

vertical-align: text-top;

在div之后垂直对齐文本

4 个答案: