实现HTML元素在一个div中的水平对齐

Question

我有三个HTML对象，想要在一个容器div中将Previous按钮放在左侧，Next按钮放在右侧，span放在中间。

<PREVIOUS> |SPAN| <NEXT>

<code>    #btnPrevious
    {
        float:left;
    }
    #spanStage
    {
        font-weight:bold;
        vertical-align:middle;    
    }
    #btnNext
    {
        float:right;
    }</code>

<code>    <div>
        <input type="button" value="Previous" id="btnPrevious"/>
        <span id="spanStage">Stage 5</span>
        <input type="button" value="Next" id="btnNext"/>
    </div></code>

Answer 1

“display:flex”样式是使这些元素在同一行的好方法。无论div中有什么类型的元素。特别是如果输入类是form-control，其他解决方案如bootstrap，inline-block将无法很好地工作。

示例：

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
     <input type="button" value="Previous" id="btnPrevious"/>
     <span id="spanStage">Stage 5</span>
     <input type="button" value="Next" id="btnNext"/>
</div>

有关flexbox的更多详细信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

flex-direction: row, column

justify-content: flex-end, center, space-between, space-around

align-items: stretch, flex-start, flex-end, center

Answer 2

只需将text-align: center添加到您的包装器中，以设置所有非浮动/非定位子元素的水平对齐：

div{
    text-align:center;
}

<span>默认为内联元素。因此，您可以在它们上使用display:block并适当地对其进行样式设置，或者稍微调整父元素的样式。由于除了<span>和<button>之外没有其他子元素，所以最好使用这个简单的解决方案。

请注意，text-align:<value>会从父元素继承，因此如果您想在包装器中包含其他内容，应该检查text-align:center是否适合您。否则，在特定元素中使用text-align:<value>，其中value可以是left、right、center或justify。

JSFiddle演示