Issue
I am trying to get blue container in the middle of pink one, however seems vertical-align: middle;
doesn't do the job in that case.
<div style="display: block; position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
<div style="background-color: lightblue;">test</div>
</div>
</div>
Result:
Expectation:
Please suggest how can I achieve that.
Solution
First of all note that vertical-align
is only applicable to table cells and inline-level elements.
There are couple of ways to achieve vertical alignments which may or may not meet your needs. However I'll show you two methods from my favorites:
1. Using transform
and top
.valign {
position: relative;
top: 50%;
transform: translateY(-50%);
/* vendor prefixes omitted due to brevity */
}
<div style="position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>
The key point is that a percentage value on top
is relative to the height
of the containing block; While a percentage value on transform
s is relative to the size of the box itself (the bounding box).
If you experience font rendering issues (blurry font), the fix is to add perspective(1px)
to the transform
declaration so it becomes:
transform: perspective(1px) translateY(-50%);
It's worth noting that CSS transform
is supported in IE9+.
2. Using inline-block
(pseudo-)elements
In this method, we have two sibling inline-block
elements which are aligned vertically at the middle by vertical-align: middle
declaration.
One of them has a height
of 100%
of its parent and the other is our desired element whose we wanted to align it at the middle.
.parent {
text-align: left;
position: absolute;
height: 56px;
background-color: pink;
white-space: nowrap;
font-size: 0; /* remove the gap between inline level elements */
}
.dummy-child { height: 100%; }
.valign {
font-size: 16px; /* re-set the font-size */
}
.dummy-child, .valign {
display: inline-block;
vertical-align: middle;
}
<div style="position: absolute; left: 50px; top: 50px;">
<div class="parent">
<div class="dummy-child"></div>
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>
Finally, we should use one of the available methods to remove the gap between inline-level elements.
Answered By - Hashem Qolami Answer Checked By - Katrina (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.