css - CSS居中多个图像/元素

Question

我想将以下 2 个按钮并排居中，而不是彼此下方。这是一个关于它在 JS Fiddle 上的表现的示例

你能告诉我处理这个问题的最佳方法吗？非常感谢任何帮助。

Answer 1

添加一个固定宽度和边距为 0 auto 的容器；

http://jsfiddle.net/2ws9r/13/

希望能帮助到你

Answer 2

将display:inline-block定义为您的anchor tags& 将text-align:center定义为它的parent. 像这样写：

a.button {
     display:inline-block;
     *display:inline;/* For IE7 */
     *zoom:1;/*For IE7*/
     padding: 3px 10px 3px 10px;
     width:50px;
     margin-left:auto;
     margin-right:auto;
     text-align: center;
     color: #636363;
     text-decoration: none;
     border-top: solid 1px #ccc;
     border-left: solid 1px #ccc;
     border-bottom: solid 1px #ccc;
     border-right: solid 1px #ccc;
}

.parent{
    text-align:center;
}

HTML

<div class="parent">
    <a class="button">Test</a>
    <a class="button">Test</a>
</div>

检查这个 http://jsfiddle.net/2ws9r/11/

Answer 3

JSFiddle

<div>
  <a class="button">Test</a>
  <a class="button">Test</a>
</div>

div{ text-align: center; }
a.button {
     display: inline-block;
     padding: 3px 10px 3px 10px;
     width:50px;
     margin-left:auto;
     margin-right:auto;
     text-align: center;
     color: #636363;
     text-decoration: none;
     border-top: solid 1px #ccc;
     border-left: solid 1px #ccc;
     border-bottom: solid 1px #ccc;
     border-right: solid 1px #ccc;
}

a.button:hover  {
     color: #179FD9;
}