我想水平居中在一个容器块元素内的两个(或可能更多)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容器上。