如何使用CSS集中多个inline-block元素？ [英] How to center multiple inline-block elements with CSS?

问题描述

我想在一个容器块元素内水平居中两个（或更多）inline-block元素。应该如下所示：

I want to horizontally center two (or possibly more) inline-block elements inside a container block element. It should look like this:

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

但是，对于我破碎的代码，它目前看起来像这样：

However, with my broken code, it is currently looking like this:

--------------------------
| _____   ____            |
||     | |     |          |
|| 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而不是plain inline是因为我不希望锚的填充和边距重叠。

The reason why the two anchors have to be inline-block and not just plain inline is because I don't want the anchor's padding and margin to overlap.

推荐答案

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

Simply set text-align: center; on the div container.

这篇关于如何使用CSS集中多个inline-block元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！