0

リンクといくつかの CSS を使用して背景を与える単純なボタンをいくつか作成し、ページの中央に配置しようとしています。ただし、ボタンの 1 つのテキストが他のボタンよりも長いため、ボタンのサイズが異なり、一貫性を保つために同じ幅にしたいと考えています。

これらのボタンを同じサイズに保つにはどうすればよいですか? それらをフロートさせてパーセンテージ幅を使用しようとすると、それらが中央に配置されなくなります。関連するマークアップを以下に示します。

<section class="buttonsSection">
    <a class="button" href="#">Very Long Sentence</a>
    <a class="button" href="#">Short Phrase</a>
</section>


.button {
    padding: 10px 15px;
    background-color: deepskyblue;
    color: white;
}

.buttonsSection{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.buttonsSection a {
    margin: 3px;
}

JSFiddle: http://jsfiddle.net/Dragonseer/eTvCp/11/

回答 以下の回答はどちらも有効ですが、Flexbox を使用するように回答を更新しています。近日中にリリースされる IE11 を含め、最新のブラウザのほとんどは優れたサポートを提供しています。Flexbox は、フローティング アイテムなどの代替手段よりも手間がかからず、複雑なレイアウトを行うためのはるかに優れたソリューションを提供するようです。

4

3 に答える 3

2

ボタンで固定幅を使用しinline-blockます。

働くフィドル

.button {
    padding: 10px 15px;
    background-color:deepskyblue;
    color: white;
    display: inline-block;
    width: 20%; /*or any other width that suites you best*/
}

.callToAction {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

usinginline-blockは要素間に少しのマージンを提供するため (HTML の空白が原因)、CSS から marin を削除しましたが、元に戻すことができます。

于 2013-09-28T20:09:15.233 に答える
1

flexboxで簡単にできます:

.button {
    padding: 10px 15px;
    width: 150px; /* Fixed width links */
    background-color:deepskyblue;
    color: white;
    margin: 3px;
}

.callToAction {
    margin: 30px 0;
    display: flex; /* Magic! */
    justify-content: center; /* Centering magic! */
}

実施例

于 2013-09-28T20:12:24.373 に答える