在div中水平对齐HTML元素

Question

我有三个HTML对象,想要在左侧安排上一个按钮,在右侧安排下一个按钮,在容器div内安排中间跨度.

<PREVIOUS> |SPAN| <NEXT>

HTML

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

CSS

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

Answer 1

"display:flex"样式是将这些元素放在同一行中的好方法.无论div中有什么元素.特别是如果输入类是表单控件,其他解决方案(如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>

有关显示的更多细节:flex:

flex-direction:行,列

对齐内容: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演示

Answer 3

line在一行中将类添加到您想要的所有子元素中，瞧！他们正在服从你保持排队。

.line {
    width:33%;
    float:left;
}

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

Answer 4

尝试使用display:flex.

.header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

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