151

周囲の div 内の 2 つのリンク「web サイトを表示」と「プロジェクトを表示」を中央に配置しようとしています。誰かがこれを機能させるために何をする必要があるかを指摘できますか?

JS フィドル: http://jsfiddle.net/F6R9C/

HTML

<div>
  <span>
    <a href="#" target="_blank">Visit website</a>
    <a href="#">View project</a>
  </span>
</div>

CSS

div { background:red;overflow:hidden }

span a {
    background:#222;
    color:#fff;
    display:block;
    float:left;
    margin:10px 10px 0 0;
    padding:5px 10px
}
4

7 に答える 7

166

別のオプションは、スパンdisplay: table;を指定して中央に配置することですmargin: 0 auto;

span {
    display: table;
    margin: 0 auto;
}
于 2013-05-10T20:07:14.193 に答える
156

1つのオプションは<a>、表示を与えてから、含まれているブロックinline-blockに適用text-align: center;することです（フロートも削除します）：

div { 
    background: red;
    overflow: hidden; 
    text-align: center;
}

span a {
    background: #222;
    color: #fff;
    display: inline-block;
    /* float:left;  remove */
    margin: 10px 10px 0 0;
    padding: 5px 10px
}

http://jsfiddle.net/Adrift/cePe3/

于 2013-05-10T20:01:17.127 に答える
10

inline-block中央に配置する要素に適用しtext-align:center、親ブロックに適用するとうまくいきました。

<span>タグでも機能します。

于 2016-03-15T20:03:29.650 に答える
2

スパンは扱いが少し難しい場合があります。使用できるティーチスパンの幅を設定する場合

margin: 0 auto;

それらを中央に配置しますが、それらは異なる行になります。構造に別のアプローチを試すことをお勧めします。

これが私が思いついた jsfiddle です: jsFiddle

編集：

Adriftの答えは最も簡単な解決策です:)

于 2013-05-10T20:05:12.363 に答える
0

あなたのフィドルに基づいて、2つの別々の行ではなく、1つの行にそれらを集中させたいと思います。その場合は、次の css を試してください。

 div { background:red;
      overflow:hidden;
}
span { display:block;
       margin:0 auto;
       width:200px;
}
span a { padding:5px 10px;
         color:#fff;
         background:#222;
}

フロートを中央に配置したいのでフロートを削除し、margin:0 auto を追加してリンクを囲むスパンを中央に配置しました。最後に、スパンに静的な幅を追加しました。これにより、赤い div 内の 1 行にリンクが配置されます。

于 2013-05-10T20:05:52.403 に答える