Implementieren Sie die horizontale Ausrichtung von HTML-Elementen in einem Div

Question

Ich habe drei HTML-Objekte und möchte die Schaltfläche „Zurück“ links, die Schaltfläche „Weiter“ rechts und den Bereich in der Mitte in einem Container-Div platzieren.

<PREVIOUS>
<p><br /></p>
<pre class="snippet-code-css lang-css Prettyprint-override"><code>
    {
        float:left;
    }
    #spanStage
    {
        Schriftdicke: fett;
        vertikal ausrichten:mitte;
    }
    #btnNext
    {
        schweben rechts;
    }</code>

<code>
        <input type="button" value="Previous" id="btnPrevious"/>
        <span id="spanStage">Stufe 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演示