Question

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

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

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

Answer 2

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

Answer 3

您是否尝试过以下操作？

div{
   text-align:center;
}

Answer 4

要么你可以尝试这些

$("#next").click(next);

或设置margin auto，如下所示

div{
   text-align:center;
}

一个很好的例子显示为 here

Answer 5

我在父容器中使用text-align: "left"，并且在页面上以UL为中心，但它也将文本集中在UL中（不需要）。所以我在<ul>添加了list-style，以便文本位于{{1}}旁边。

Answer 6

你也可以

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

使内联块水平居中！

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

6 个答案: