Align label to centre and left positions in DIV

Question

I have a DIV like this:

    <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).

How can i do that?

    ----------------------------------
   |                                 |
   | OrderNo     OrderName           |
   |                                 |
    ----------------------------------

Answer 1

Following css will give your expected result:

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:

Other way using display:flex. Here i have added height and border to display vertical center.

And give margin:0 auto; to center.

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>