如何使用 CSS 使多个内联块元素居中？

Posted 2023-03-06

技术标签:

【中文标题】如何使用 CSS 使多个内联块元素居中？【英文标题】：How to center multiple inline-block elements with CSS? 【发布时间】：2012-02-03 15:22:23 【问题描述】：

我想在容器块元素内水平居中两个（或可能更多）内联块元素。它应该是这样的：

--------------------------
|      _____   _____      |
|     |     | |     |     |
|     | foo | | bar |     |
|     |_____| |_____|     |
|_________________________|

但是，由于我的代码损坏，它目前看起来像这样：

--------------------------
| _____   ____            |
||     | |     |          |
|| foo | | bar |          |
||_____| |_____|          |
|_________________________|

HTML

<div>
 <a>foo</a>
 <a>bar</a>
</div>

CSS

div a 
 display: inline-block;
 padding: 1em;
 margin: 1em;
 border: 1px solid black;

两个锚点必须是 inline-block 而不仅仅是普通的 inline 的原因是因为我不希望锚点的 padding 和 margin 重叠。

【问题讨论】：

【参考方案1】：

只需在 div 容器上设置text-align: center;。

【讨论】：

这很简单。我一直忘记text-align 也适用于非文本元素。需要注意的是，如果您之前使用过float: left;，您必须确保删除该行并改用display: inline-block;。如果foo 和bar 元素的宽度不同，这将不起作用。很遗憾。此外，当添加 margein-left 和 margin-right 值以在两个元素之间添加空格时，事情对我来说变得很奇怪。【参考方案2】：

在父元素上设置text-align: center;。

【讨论】：

【参考方案3】：

您是否尝试过以下方法？

div
   text-align:center;

【讨论】：

【参考方案4】：

你可以试试这些

div
   text-align:center;

或者如下图自动设置边距

div a
  margin:auto;
  margin-left:1em;
  margin-right:1em;
  margin-top:1em;
  margin-bottom:1em;
 display:inline-block;

展示了一个很好的例子here

【讨论】：

您的第二个示例不起作用（至少在 Safari 11 上）【参考方案5】：

只是为了清楚......

<div style="display: inline-block; text-align: center"> 
  ....
</div>

不适用于不同宽度的元素，但是

<div style="text-align: center;">
<div style="display: inline-block;">
 ....
</div>
</div>

会

【讨论】：

【参考方案6】：

我在父容器中使用了text-align: "center"，它使 UL 在页面上居中，但它也使 UL 中的文本居中（不需要）。所以我在<ul> 中添加了text-align: "left"，这样文本就在list-style 旁边。

【讨论】：

【参考方案7】：

你也可以这样做

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

使内联块水平居中！

【讨论】：

以上是关于如何使用 CSS 使多个内联块元素居中？的主要内容，如果未能解决你的问题，请参考以下文章