我有这样的DIV:
<div id="mydiv">
<label id="orderName" style="align:center;">Order Name</label>
<label id="orderNo" style="align:left;">Order No</label>
</div>
Run Code Online (Sandbox Code Playgroud)
我想:
- 将OrderName水平和垂直对齐div的中心.
- 在div的水平左侧(垂直居中)对齐OrderNo.
我怎样才能做到这一点?
----------------------------------
| |
| OrderNo OrderName |
| |
----------------------------------
Run Code Online (Sandbox Code Playgroud)
ket*_*tan 13
以下css将给出您的预期结果:
div {
text-align: center;
}
#orderName {
vertical-align: middle;
}
#orderNo {
float: left;
}
Run Code Online (Sandbox Code Playgroud)
<div id="mydiv">
<label id="orderName" >Order Name</label>
<label id="orderNo">Order No</label>
</div>
Run Code Online (Sandbox Code Playgroud)
解决方案2:
其他方式使用display:flex
.这里我添加height
并border
显示垂直中心.
并给予margin:0 auto;
中心.
div {
align-items: center;
display: flex;
height: 40px;
border: 1px solid;
}
#orderName {
order: 2;
margin:0 auto;
}
Run Code Online (Sandbox Code Playgroud)
<div id="mydiv">
<label id="orderName" >Order Name</label>
<label id="orderNo">Order No</label>
</div>
Run Code Online (Sandbox Code Playgroud)