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

Question

我有三个HTML对象，希望在一个容器div内将“上一页”按钮排列在左侧，“下一页”按钮排列在右侧，并将中间的span居中。

<PREVIOUS> |SPAN| <NEXT>

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

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

- gigi

---

你考虑过使用弹性盒子布局吗？https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - chchrist

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（居中对齐）

- facebook-100006652272506

---

请问您能否添加更多关于 flex 的内容，这将有助于那些刚接触 CSS 弹性盒子概念的人们。 - SakthiSureshAnand

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演示

- Zeta

Answer 3

尝试使用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>

- Kundan

Answer 4

将类名 line 添加到您想要在一行中显示的所有子元素，voila！它们会服从于您保持在同一行。

.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>

- Vivek Chandra

Answer 5

只需将此代码添加到您的CSS中。

#btnPrevious,#spanStage,#btnNext {
      width:33%;
       display:inline-block;
     }

- Taiti