html - 如何将 "scoreBox"内的元素水平居中？

Question

如何将“scoreBox”内的元素水平居中？

它们目前只是左对齐。

.voteButtons {
  display: inline-block;
  text-align: center;
}

.HP {
  display: inline-block;
  text-align: center;
  width: auto !important;
  margin-left: 5px !important;
}

.scoreBox {
  display: flex;
  margin-top: 10px;
  padding-top: 10px;
  text-align: center;
  width: auto !important;
}

<div class="scoreBox">
  <span class="voteButtons"><img class="UpvoteButton" id="voteUp" src="..."><img class="DownvoteButton" id="voteDown" src="..."></span>
  <div class="HP">
    <%= post.upvotes - post.downvotes%> score </div>
</div>

Answer 1

将 justify-content: center 添加到您的 scoreBox - 请参阅下面的演示:

.voteButtons {
  display: inline-block;
  text-align: center;
}

.HP {
  display: inline-block;
  text-align: center;
  width: auto !important;
  margin-left: 5px !important;
}

.scoreBox {
  display: flex;
  margin-top: 10px;
  padding-top: 10px;
  text-align: center;
  width: auto !important;
  justify-content: center;
}

<div class="scoreBox">
  <span class="voteButtons"><img class="UpvoteButton" id="voteUp" src="..."><img class="DownvoteButton" id="voteDown" src="..."></span>
  <div class="HP">
    <%= post.upvotes - post.downvotes%> score </div>
</div>