Menu
Is there any work around for vertical alignment of elements or texts in bootstrap spans relative to other spans
For eg. if I have a row and spans like this
<div class="row-fluid">
<div class="span3" style="background-color:lightblue">Description</div>
<div class="span9" style="background-color:pink">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum ....
</div>
</div>
It looks like this
So is there a way to show "Description" vertically center of the next span's height?
984
The CSS just sizes the div, vertically center aligns the span by setting the div's line-height equal to its height, and makes the span an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the span, so its contents will flow naturally inside the block.
Vertical alignment can be defined as the alignment of a pipe in the vertical direction with respect to the proposed plan. Pipe alignment should not vary more than 2 inches in the vertical direction and not more than 6 inches in the horizontal direction.
1 — Vertical Center Using Auto Margins One way to vertically center is to use my-auto . This will center the element within it's flexbox container (The Bootstrap 4 . row is display:flex ). For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.
try display: table; for parent and display: table-cell; for child
JSFiddle
144
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
