Menu
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 |
| |
----------------------------------
965
Other way using display:flex . Here i have added height and border to display vertical center. And give margin:0 auto; to center. Ketan> Although vertical alignment works now - But Order Name only starts from center position(50%) now, instead of being centered - horizontally.
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
Answer: Use the CSS line-height property Suppose you have a div element with the height of 50px and you have placed some link inside the div that you want to align vertically center. The simplest way to do it is — just apply the line-height property with value equal to the height of div which is 50px .
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
