在 div 中水平对齐 HTML 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11063325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align HTML elements horizontally in a div
提问by gigi
I have three HTML objects and want to arrange Previous button at the left side, Next button at right side and span in the middle inside a container div.
我有三个 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>采纳答案by Zeta
Just add text-align: centerto your wrapper to set the horizontal alignment of all non-floating/non-positioned children:
只需添加text-align: center到您的包装器即可设置所有非浮动/非定位子项的水平对齐方式：
div{
text-align:center;
}
<span>are inline elements by default. Thus you either have to use display:blockon them and style them appropriately, or just tweak the parent style a little bit. Since there are no other children than the <span>and the <button>s your best of with this simple solution.
<span>默认是内联元素。因此，您要么必须使用display:block它们并适当地设置它们的样式，要么只是稍微调整父样式。由于没有其他孩子比<span>和<button>你最好的与此简单的解决方案。
Note that text-align:<value>gets inherited from the parent, so if you want to include something else in your wrapper you should check whether text-align:centeris okay for you. Otherwise use text-align:<value>in the specific element, where valueis left, right, centeror justify.
请注意，它text-align:<value>是从父级继承的，因此如果您想在包装器中包含其他内容，您应该检查是否text-align:center适合您。否则，使用text-align:<value>在特定的元素，这里value是left，right，center或justify。
回答by facebook-100006652272506
The "display:flex" style is a good way to make these elements in same line. No matter what kind of element in the div. Especially if the input class is form-control,other solutions like bootstrap, inline-block will not work well.
"display:flex" 样式是使这些元素在同一行中的好方法。不管 div 中是什么元素。特别是如果输入类是表单控件，其他解决方案如 bootstrap、inline-block 将无法正常工作。
Example:
例子：
<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>
More detail about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
更多关于 flexbox 的细节：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
flex-direction: row, column
弹性方向：行，列
justify-content: flex-end, center, space-between, space-around
justify-content: flex-end, center, space-between, space-around
align-items: stretch, flex-start, flex-end, center
对齐项目：拉伸、弹性开始、弹性结束、居中
回答by Vivek Chandra
Add the class lineto all the children elements that you want in a single line and voila! They are obeying youto stay in a 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>回答by Kundan
Try using display:flex.
尝试使用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>回答by Taiti
Just add this to your css.
只需将其添加到您的 css 中即可。
#btnPrevious,#spanStage,#btnNext {
width:33%;
display:inline-block;
}
