I keep reading articles that floats are outdated and that using inline-block solves problems such as having to use clearfix and a few more. These articles go on to justify inline-block by showing the same example: three squares that are aligned middle. In trying to use inline-block to create a navbar, I come across many problems. My navbar layout looks like such:
<nav id="main-nav" class="navbar">
<div class="logo">
<!-- image -->
</div><!--
--><div class="navbar-header"><!--
--><button type="button" class="navbar-toggle closed">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</button>
</div>
<div class="navbar-collapse navbar-sidebar">
<ul class="navbar-nav">
<!-- list-items -->
</ul>
</div>
</nav>
In order to align the logo left and the navbar-toggle button right, I had to use text-align justify and some special markup, which I find just as obtrusive as clearfix (Align two inline-blocks left and right on same line):
.header {
text-align: justify;
/* ie 7*/
*width: 100%;
*-ms-text-justify: distribute-all-lines;
*text-justify: distribute-all-lines;
}
.header:after{
content: '';
display: inline-block;
width: 100%;
height: 0;
font-size:0;
line-height:0;
}
.logo {
display: inline-block;
vertical-align: top;
}
.navbar-header {
display: inline-block;
vertical-align: middle;
}
My navbar is very similar to Bootstrap's. At small screen sizes, I want my navbar-toggle button to be centered in the navbar area. Vertical align: middle, however, would align this button to the middle my logo, which will be shorter or taller than the navbar, and which I also want aligned to the top of the navbar. Inline-block doesn't allow me to vertically align my content to the parent container, which seems to make it a non-viable option in many layouts. Is there some sort of solution where I can align my content to the container, rather than the sibling elements? I've been experimenting with setting different line heights and vertical-aligns.
If you have followed the comments above, there are many question being asked. I'll try to summaries most of it.
For
display:inline-block, thevertical-alginproperty only affects the position of the element itself, and relative to the position of the siblings (the tallest sibling especially).Percentage height like
height:100%, only works with fixed height of parent container, or all percentage height that is set all the way back to<html>tag. But excluding positioned (relative,absoluteetc.) elements, and viewport unitsvh, and maybe some other cases.For
display:table-cell, thevertical-alginproperty affects all the child elements, again excluding some positioned ones.I think CSS table is easiest way to get your desired layout done in this case. Since you can easily have both vertical and horizontal alignments set on it. Here is a simplified workaround.
JsFiddle Demo