如何将“scoreBox”内的元素水平居中？ [复制]

Posted 2023-03-05

【中文标题】如何将“scoreBox”内的元素水平居中？ [复制]

【英文标题】：How to horizontally center the elements inside "scoreBox"? [duplicate]

【发布时间】：2018-01-27 10:10:08

【问题描述】：

如何将“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>

【问题讨论】：

@axlj 我已经看到了。我也认为这很可能以前已经回答过了，但我似乎无法找到一种方法来做这么简单的事情......我需要 3 个元素保持靠近并居中。

第 6 个答案有 Flexbox 版本，justfy-content: center ...只需从您发布的代码中删除 display: flex 即可：jsfiddle.net/036euku1

【参考方案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>

【讨论】：

这就是我想要的。谢谢！

【参考方案2】：

使 HP width: 100% 或 margin: 0 auto 发生这种情况是因为您无法将整个 div 居中对齐，因此如果您想要 100% 的宽度，您需要做一些边距魔术。

编辑：justify-content 也很有意义

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


.HP 
  display: inline-block;
  text-align: center;
  width: auto !important;
  margin: 0 auto;


.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>

【参考方案3】：

从下面的代码可以看出，我只是添加 justify-content 并使其居中。它定义了沿主轴的对齐方式。当一行中的所有 flex 项目都不灵活，或者是灵活但已达到最大大小时，它将帮助您分配额外的可用空间。

当项目溢出行时，它还对项目的对齐施加一些控制。

为了轻松了解如何使用 justify-content 的不同方式。

希望这能回答你的问题。

.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>