CSS：中心要素の周りに要素を揃える方法は？

Question

私は三つの部分からなる単純なページナビゲーションを作成しようとしています：

1. いくつか前のページ番号（もしあれば）
2. 現在のページ番号（これはセンタリングされなければならない）
3. いくつかの今後のページ番号（存在する場合）

重要なことは、現在のページ番号が親コンテナ内で常に水平に中央揃えされていることです。他の2つの部分は、残りの水平スペースを均等に占める必要があります。

このJSFiddleは、この問題を解決するための私の2つの試みを示しています。

解決策1：text-align: centerを使用してください。これにより、両方の辺の幅が等しい場合にのみ、望ましい結果が得られます。そうでない場合、現在のページ番号は中央にはありません。

HTML

<div class="container"> 
    <input type="button" value="47"> 
    <input type="button" value="48"> 
    <input type="button" value="49"> 
    <input type="text" size="5" maxlength="5" value="50"> 
    <input type="button" value="51"> 
    <input type="button" value="52"> 
    <input type="button" value="53"> 
</div> 

CSS

.container, input { 
    text-align: center; 
} 

溶液2：均等水平スペースを分配するために、手動で指定された幅を使用します。これにより、すべての状況で現在のページ番号が効果的に集中しますが、幅をハードコードする必要があります。

HTML

<div class="container"> 
    <div class="left"> 
     <input type="button" value="47"> 
     <input type="button" value="48"> 
     <input type="button" value="49"> 
    </div> 
    <div class="right"> 
     <input type="button" value="51"> 
     <input type="button" value="52"> 
     <input type="button" value="53"> 
    </div> 
    <div class="center"> 
     <input type="text" size="5" maxlength="5" value="50"> 
    </div> 
</div> 

.left { 
    width: 40%; 
    float: left; 
    text-align: right; 
} 
.right { 
    width: 40%; 
    float: right; 
    text-align: left; 
} 
.center { 
    width: 20%; 
    margin-left: 40%; 
} 

どちらもこれらのソリューションのCSSは本当に私がやりたいです。現在のページ番号を中央に置く方法はありますか？他の要素は、任意のピクセルまたはパーセント幅ではなく、自然なサイズに揃えることができますか？

Answer 1

あなたはflexを使用して、一緒にプロパティをフロート、私の解決策をチェックアウトする必要があります：

.container { 
 
    display: -webkit-flex; /* Safari */ 
 
    display: flex; 
 
} 
 

 
.container, input { 
 
    text-align: center; 
 
} 
 

 
.container:after { 
 
    content:""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 50%; 
 
    border-left: 2px dotted #ff0000; 
 
} 
 

 
.left { 
 
    display: inline-block; 
 
    flex: 1; 
 
    
 
} 
 

 
.left input { 
 
    float: right; 
 
} 
 

 
.right { 
 
    display: inline-block; 
 
    flex: 1; 
 
} 
 

 
.right input { 
 
    float: left; 
 
} 
 

 
.center { 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
     <input type="button" value="48"> 
 
     <input type="button" value="49"> 
 
    </div> 
 
    <div class="center"> 
 
     <input type="text" size="5" maxlength="5" value="50"> 
 
    </div> 
 
    <div class="right"> 
 
     <input type="button" value="51"> 
 
     <input type="button" value="52"> 
 
     <input type="button" value="53"> 
 
    </div> 
 
    
 
</div>

Answer 2

このCSSテーブルのレイアウトを試してください。ここで

.container { 
 
    width: 100%; 
 
    display: table; 
 
    border-collapse: collapse; 
 
    table-layout: fixed; 
 
} 
 
.left, .center, .right { 
 
    display: table-cell; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
} 
 
.center { 
 
    width: 50px; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
     <input type="button" value="47"> 
 
     <input type="button" value="48"> 
 
     <input type="button" value="49"> 
 
    </div> 
 
    <div class="center"> 
 
     <input type="text" size="5" maxlength="5" value="50"> 
 
    </div> 
 
    <div class="right"> 
 
     <input type="button" value="51"> 
 
     <input type="button" value="52"> 
 
     <input type="button" value="53"> 
 
    </div> 
 
</div>

jsfiddle

Answer 3

あなたが考えるかもしれないソリューションです。

利用隠しボタンを常に左右

上のタグの同じ数を維持するために、

<div class="container"> 
    <input style="visibility: hidden" type="button" value="0"> 
    <input style="visibility: hidden" type="button" value="0"> 
    <input style="visibility: hidden" type="button" value="0"> 
    <input type="text" size="5" maxlength="5" value="1"> 
    <input type="button" value="2"> 
    <input type="button" value="3"> 
    <input type="button" value="4"> 
</div> 

代わりに、あなたは3つの部分に全幅を分割するためにCSSのCALCを使用することができます％の幅を指定する

Answer 4

：

[50% - 25px][50 px][50% - 25px] 

が次に左部分を右揃えは、右の部分を合わせ、左すれば完了です。 SASSまたはLESSを使用する場合は、中央部分の幅を指定するだけで済みます。

.container { 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 
.container > * { 
 
    display: inline-block; 
 
} 
 
.container .left { 
 
    width: calc(50% - 25px); 
 
    text-align: right; 
 
} 
 
.container > input { 
 
    width: 50px; 
 
    margin: 0px; 
 
    text-align: center; 
 
} 
 
.container .right { 
 
    width: calc(50% - 25px); 
 
    text-align: left; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
     <input type="button" value="48" /> 
 
     <input type="button" value="49" /> 
 
    </div> 
 
    <input type="text" maxlength="5" value="50" /> 
 
    <div class="right"> 
 
     <input type="button" value="51" /> 
 
     <input type="button" value="52" /> 
 
     <input type="button" value="53" /> 
 
    </div> 
 
</div>

Answer 5

あなたはラッパの値flex、そして子供の財産flexとCSSプロパティdisplayを使用することができます。

次のリソースを確認し、それについての詳細を学ぶために：A Complete Guide to Flexbox

ここでは一例です：

.wrapper { 
 
    display: flex; 
 
} 
 
.wrapper > div { 
 
    text-align: center; 
 
    flex: 1; 
 
    border: 1px solid #000; 
 
}

<div class="wrapper"> 
 

 
    <div> 
 
    <button>1</button> 
 
    <button>2</button> 
 
    </div> 
 

 
    <div> 
 
    <button>3</button> 
 
    </div> 
 

 
    <div> 
 
    <button>4</button> 
 
    <button>5</button> 
 
    <button>6</button> 
 
    </div> 
 

 
</div>