Menu
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.
First, the <span> tag sets the height of <div> tag using the line-height property. The <span> also becomes an inline-block with the use of the vertical-align: middle. With <span> now an inline-block, it can be set at middle by using vertical-align: middle which works great for inline-block elements.
To align two <div> elements vertically in Bootstrap 3, you can try using the CSS Flexible Box Layout. In the example below, we display the needed row as a flex container box with the CSS display property and then, align the flex-items (columns) vertically with the align-items property.
For example, if you're trying to align something horizontally OR vertically, it's not that difficult. You can just set text-align to center for an inline element, and margin: 0 auto would do it for a block-level element.
See my article on understanding vertical alignment. There are multiple techniques to accomplish what you want at the end of the discussion.
(Super-short summary: either set the line-height of the child equal to the height of the container, or set positioning on the container and absolutely position the child at top:50% with margin-top:-YYYpx, YYY being half the known height of the child.)
At your parent DIV add
display:table;
and at your child element add
display:table-cell;
vertical-align:middle;
Quick answer for single line span
Make the child (in this case a span) the same line-height as the parent <div>'s height
<div class="parent">
<span class="child">Yes mom, I did my homework lol</span>
</div>
You should then add the CSS rules
.parent { height: 20px; }
.child { line-height: 20px; vertical-align: middle; }
Or you can target it with a child selector
.parent { height: 20px; }
.parent > span { line-height: 20px; vertical-align: middle; }
Background on my own use of this
I ran into this similar issue where I needed to vertically center items in a mobile menu. I made the div and spans inside the same line height. Note that this is for a meteor project and therefore not using inline css ;)
HTML
<div class="international">
<span class="intlFlag">
{{flag}}
</span>
<span class="intlCurrent">
{{country}}
</span>
<span class="intlButton">
<i class="fa fa-globe"></i>
</span>
</div>
CSS (option for multiple spans in a div)
.international {
height: 42px;
}
.international > span {
line-height: 42px;
}
In this case if I just had one span I could have added the CSS rule directly to that span.
CSS (option for one specific span)
.intlFlag { line-height: 42px; }
Here is how it displayed for me
As in a similar question, use display: inline-block with a placeholder element to vertically center the span inside of a block element:
html, body, #container, #placeholder { height: 100%; }
#content, #placeholder { display:inline-block; vertical-align: middle; }<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="container">
<span id="content">
Content
</span>
<span id="placeholder"></span>
</div>
</body>
</html>Vertical alignment is only applied to inline elements or table cells, so use it along with display:inline-block or display:table-cell with a display:table parent when vertically centering block elements.
References:
CSS Horizontal and Vertical Centering
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