Question

在图片中问题是：

i.stack.imgur.com/ryV96.png

详情：我试图保持＆＃34; voteTotal＆＃34;以增加到更大（例如两个或三个数字）数字为中心。我已经摆弄了各种＆＃34; text-align＆＃34;和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

尝试将text-align：center添加到父span类。

P.S。我建议你从voteTotal中删除50％的宽度并将其更改为其他内容。如果您需要进一步的帮助，请提供演示链接。

Answer 2

将块元素放在内联元素（跨度）中无效。这主要是中心对齐的问题，并为H4提供了足够的空间：

＆＃13;

sapply(nx, deparse)

# [1] "~1 | random1" 
# [2] "~x1 | random1"
# [3] "~x1 | random1"
# [4] "~x1 | random1"
# [5] "~x1 + x2 | random1"
# [6] "~x1 + x2 | random1"

＆＃13;

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

＆＃13;

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

2 个答案: