Html 如何将内部元素水平居中“；记分箱“；？

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

它们目前只是左对齐

.voteButtons{
显示：内联块；
文本对齐：居中；
}
.惠普{
显示：内联块；
文本对齐：居中；
宽度：自动！重要；
左边距：5px！重要；
}
.记分箱{
显示器：flex；
边缘顶部：10px；
填充顶部：10px；
文本对齐：居中；
宽度：自动！重要；
}

分数

将

调整内容：中心

添加到您的

记分框

-请参阅下面的演示：

.voteButtons{
显示：内联块；
文本对齐：居中；
}
.惠普{
显示：内联块；
文本对齐：居中；
宽度：自动！重要；
左边距：5px！重要；
}
.记分箱{
显示器：flex；
边缘顶部：10px；
填充顶部：10px；
文本对齐：居中；
宽度：自动！重要；
证明内容：中心；
}

分数

使HP

宽度：100%

或

边距：0自动

这是因为你们不能将整个div居中对齐，所以若你们想要100%的宽度，你们需要做一些边距魔术

编辑：调整内容也有意义

.voteButtons{
显示：内联块；
文本对齐：居中；
}
.惠普{
显示：内联块；
文本对齐：居中；
宽度：自动！重要；
保证金：0自动；
}
.记分箱{
显示器：flex；
边缘顶部：10px；
填充顶部：10px；
文本对齐：居中；
宽度：自动！重要；
}

分数

正如您从下面的代码中所看到的，我只是添加了justify内容并使其成为中心。它定义沿主轴的对齐方式。当一行中的所有flex项都不灵活或灵活但已达到最大尺寸时，它将帮助您分配剩余的额外可用空间

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

轻松理解如何使用内容的不同方式

希望这能回答你的问题

.voteButtons{
显示：内联块；
文本对齐：居中；
}
.惠普{
显示：内联块；
文本对齐：居中；
宽度：自动！重要；
左边距：5px！重要；
}
.记分箱{
显示器：flex；
边缘顶部：10px；
填充顶部：10px；
文本对齐：居中；
宽度：自动！重要；
证明内容：中心；
}

分数

@axlj我已经看到了。我也认为这很可能已经得到了回答，但我似乎找不到一个方法来做这么简单的事情。。。我需要这三个元素保持紧密并居中。第六个答案是Flexbox版本，

justfy content:center

…只需从您发布的代码中删除

display:flex

，就可以了：这就是我想要的。谢谢