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>