在div中水平对齐HTML元素

Question

我有三个HTML对象，想要在容器div的内部将左侧的“上一个”按钮，右侧的“下一个”按钮排列在中间。

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

Answer 1

“ display：flex”样式是使这些元素在同一行中的好方法。 无论div中的元素是哪种。 特别是如果输入类是表单控件，则其他解决方案（如引导程序，内联块）将无法正常工作。

例：

<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：行，列

证明内容：弹性端，中心，中间间距，周围间距

对齐项目：拉伸，伸缩开始，伸缩结束，居中

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添加到所需的所有子元素中， 瞧 ！ 他们正在服从您的要求。

 .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

只需将其添加到您的CSS。

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

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>