CSS居中多个图像/元素

Question

我想将以下 2 个按钮并排居中，而不是彼此下方。这里是an example of how it is looking at the moment on JS Fiddle

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

Answer 1

将 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 2

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

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

希望对你有帮助

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;
}