Align этикетки к центру и левой позиции в DIV

Question

У меня есть DIV так:

<div id="mydiv"> 
     <label id="orderName" style="align:center;">Order Name</label> 
     <label id="orderNo" style="align:left;">Order No</label> 
    </div> 

Я пытаюсь:
- выравнивание OrderName по горизонтали и по вертикали центр дел.
- выровнять OrderNo горизонтально слева от div (и по вертикали по центру).

Как я могу это сделать?

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

Answer 1

После 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>

Решение 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; 
 
}

<div id="mydiv"> 
 
     <label id="orderName" >Order Name</label> 
 
     <label id="orderNo">Order No</label> 
 
    </div>