将标签对齐到DIV中的中心位置和左侧位置

Jas*_*per 5 html css html5

我有这样的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.这里我添加heightborder显示垂直中心.

并给予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)