Question

我想将下面的两个按钮并排放在一起而不是在另一个下面。这是an example of how it is looking at the moment on JS Fiddle

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

Answer 1

将 display：inline-block 定义为anchor tags＆amp;将 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;
}

CSS以多个图像/元素为中心

3 个答案: