<p>我有三个HTML对象，想要在一个容器div中将Previous按钮放在左侧，Next按钮放在右侧，span放在中间。</p>
<pre class="brush:php;toolbar:false;"><PREVIOUS> |SPAN| <NEXT></pre>
<p><br /></p>
<pre class="snippet-code-css lang-css prettyprint-override"><code> #btnPrevious
{
float:left;
}
#spanStage
{
font-weight:bold;
vertical-align:middle;
}
#btnNext
{
float:right;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> <div>
<input type="button" value="Previous" id="btnPrevious"/>
<span id="spanStage">Stage 5</span>
<input type="button" value="Next" id="btnNext"/>
</div></code></pre>
<p><br /></p>
2
929
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
“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
只需将
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演示