CSS：如何對齊居中元素周圍的元素？

Question

我試圖創建一個簡單的頁面導航由三個部分組成：

1. 幾個以前的頁碼（如果有的話）
2. 當前頁碼（這必須居中）
3. 幾個即將到來頁碼（如果有的話）

重要的是當前頁碼始終在父容器中居中居中。另外兩個部分應均勻佔據剩餘的水平空間。

這JSFiddle說明了我的兩個嘗試解決這個問題。使用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> 

CSS

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

這些解決方案都真正做我想做的。有什麼辦法讓當前頁碼居中，同時允許其他元素對齊到其自然大小，而不是任意像素或百分比寬度？

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> 

Answer 4

除了指定的寬度％你可以使用CSS來計算全寬3個部分分裂的：

[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

您可以使用CSS屬性display與包裝價值flex，並在孩子的財產flex。

要了解更多關於它，請檢查以下資源：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>