css - 複数の画像/要素をセンタリングする CSS

Question

次の 2 つのボタンを互いの下ではなく、並べて中央に配置したいと思います。JS Fiddle での現在の様子の例を次に示します。

これを処理する最善の方法を教えていただけますか？どんな助けでも本当に感謝しています。

Answer 1

固定幅とマージン 0 auto のコンテナーを追加します。

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

それが役に立てば幸い

Answer 2

display:inline-blockをあなたに定義し、 text-align:centerをそれにanchor tags定義します。次のように書きます。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;
}