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

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

-------------------------- | _____ _____ | | | | | | | | | 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; } 

为什么两个锚必须内联块，而不是简单的内联是因为我不希望锚的填充和边距重叠。

Answer 1

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

Answer 2

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

Answer 3

你有尝试过以下吗？

 div{ text-align:center; } 

Answer 4

要么你可以尝试这些

 div{ text-align:center; } 

或者如下所示设置边距自动

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

这里给出一个很好的例子

Answer 5

我在父容器中使用了text-align: "center" ，并将页面中心的UL居中，但是它也将文本居中放置在UL中（不需要）。 于是我在<ul>添加了一个text-align: "left" ，以便文本位于list-style旁边。