如何使用CSS集中多个inline-block元素?

前端之家收集整理的这篇文章主要介绍了如何使用CSS集中多个inline-block元素?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想水平居中在一个容器块元素内的两个(或可能更多)inline-block元素。它应该看起来像这样:
--------------------------
|      _____   _____      |
|     |     | |     |     |
|     | 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;
}

这两个锚必须是内联块而不是简单的内联的原因是因为我不想要锚的填充和边距重叠。

解决方法

只需设置text-align:center;在div容器上。
原文链接:https://www.f2er.com/css/221605.html

猜你在找的CSS相关文章