html - 以较大数字为中心的文本？

Question

图片中的问题是:

i.stack.imgur.com/ryV96.png

详情: 我试图让“voteTotal”居中，因为它增加到更大的数字(比如两位或三位数字)。我摆弄过各种“文本对齐”和 css 属性(以及 div-wrappers)，但我无法弄清楚为什么较大的数字不能正确居中。有什么想法吗？

HTML:

<span>
  <button class="glyphicon glyphicon-menu-up voteButton upvoted"></button>
  <h4 class="voteTotal">10</h4>
  <button class="glyphicon glyphicon-menu-down voteButton"></button>
</span>

CSS:

.voteButton {
  margin: 0 auto;
  padding: 0;
  font-size: 1.5em;
}

.voteTotal {
  display: block;
  margin: -.5em auto 0 auto;
  padding: 0;
  width: 50%;
  text-align: center;
}

Answer 1

将 block 元素放在行内元素(跨度)中是无效的。这主要是居中对齐和给 H4 足够空间的问题:

div {
  display: inline-block;
  text-align: center;
  background: pink;
  padding: 10px;
  min-width: 20px;
}
.voteButton {
  margin: 0 auto;
  padding: 0;
  font-size: 1.5em;
}
.voteTotal {
  display: block;
  margin: 0 auto;
}

<div>
  <button class="glyphicon glyphicon-menu-up voteButton upvoted">></button>
  <h4 class="voteTotal">3</h4>

  <button class="glyphicon glyphicon-menu-down voteButton">
    <</button>
</div>
<div>
  <button class="glyphicon glyphicon-menu-up voteButton upvoted">></button>
  <h4 class="voteTotal">10</h4>

  <button class="glyphicon glyphicon-menu-down voteButton">
    <</button>
</div>