Question

我有三个HTML对象，想要在左侧安排“上一步”按钮，在右侧安排“下一步”按钮，并在容器div内部中间跨度。

<PREVIOUS> |SPAN| <NEXT>

HTML

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

CSS

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

Answer 1

只需将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 Demo

Answer 2

＆＃34;显示：flex＆＃34; style是将这些元素放在同一行中的好方法。无论div中有什么元素。特别是如果输入类是表单控件，其他解决方案（如bootstrap，inline-block）将无法正常工作。

示例：

http_req_duration: 197.41ms, 70.32ms,91.56ms, 619.44ms, 288.2ms, 326.23ms

有关display：flex：

的更多细节

flex-direction：row，column

对齐内容：flex-end，center，space-between，space-around

align-items：stretch，flex-start，flex-end，center

Answer 3

只需将此添加到您的CSS中即可。

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

Answer 4

Demo

将类 - line添加到您想要的所有子元素中，然后瞧 .. !! ..他们服从你保持一线!! ..

这就是诀窍 -

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

Answer 5

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

在div中水平对齐HTML元素

5 个答案: