Question

我的问题很简单，如何动态地使用css“button”类来居中这些two elements？ - ＆GT; http://jsfiddle.net/MyVN4/（我不想指定元素的宽度）

.button {
   background-color: black;
   border-radius: 10px;
   color: white;
   display: inline-block;
   padding: 10px;
 }

我一直在寻找其他类似的问题，但没有一个解决方案可以解决这个问题。

提前感谢您的帮助！

Answer 1

将text-align: center;放在其父级（无论其父级是什么）。

Answer 2

鉴于它们是inline元素，只需在父元素上设置text-align:center，在本例中为body元素：

UPDATED EXAMPLE HERE

#parent_element {
    text-align:center;
}

当元素为block级元素时，您通常只需要在元素上设置宽度，并且不受text-align:center的影响，（它需要margin:0 auto）。使用text-align:center可能是居中的最佳方法，即使您必须将元素的显示更改为inline-block。请注意inline元素respect whitespace in the markup。

这一事实

不使用宽度居中动态div

2 个答案: