Html 将标签与 DIV 中的中心和左侧位置对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35938650/
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 label to centre and left positions in DIV
提问by Jasper
I have a DIV like this:
我有一个这样的 DIV：
<div id="mydiv">
<label id="orderName" style="align:center;">Order Name</label>
<label id="orderNo" style="align:left;">Order No</label>
</div>
I am trying to:
- align OrderName horizontally and vertically center of the div.
- align OrderNo horizontally left of the div (and vertically centred).
我正在尝试：
- 将 OrderName 水平和垂直对齐 div 的中心。
- 将 OrderNo 水平对齐到 div 的左侧（垂直居中）。
How can i do that?
我怎样才能做到这一点？
----------------------------------
| |
| OrderNo OrderName |
| |
----------------------------------
回答by ketan
Following css will give your expected result:
以下 css 将给出您的预期结果：
div {
text-align: center;
}
#orderName {
vertical-align: middle;
}
#orderNo {
float: left;
} <div id="mydiv">
<label id="orderName" >Order Name</label>
<label id="orderNo">Order No</label>
</div>Solution 2:
解决方案2：
Other way using display:flex. Here i have added heightand borderto display vertical center.
其他方式使用display:flex. 在这里我添加height并border显示垂直中心。
And give margin:0 auto;to center.
并给予margin:0 auto;中心。
div {
align-items: center;
display: flex;
height: 40px;
border: 1px solid;
}
#orderName {
order: 2;
margin:0 auto;
}<div id="mydiv">
<label id="orderName" >Order Name</label>
<label id="orderNo">Order No</label>
</div>回答by Ajay Kumar
Align the label and text field -
对齐标签和文本字段 -
.search-box-container{
display:flex;
width:60%
background: black;
margin:0 auto;
font-size:25px;
}
.label{
margin:auto;
}
input[type=text]{
height:20px;
}<html>
<body>
<div class="search-box-container">
<label for="" class="label">Name</label>
<input type="text" class="searchbox"/>
</div>
</body>
</html>