How do I vertically align two divs in the center and leave one div at the bottom?
I have this html:
<!-- Left Navigation Bar -->
<div class="row" id="columnMenu">
<!-- Logo -->
<div class="col-md-2 LogoCol-md-2">
<div class="nav nav-pills nav-stacked" id="columnMenuTitle">
<a href="" title="" class="navbar-brand">
Picture
<br>
Imran Name
</a>
</div>
</div>
<!-- Categories -->
<div class="col-md-2 CategoryCol-md-2">
<ul class="nav nav-pills nav-stacked">
<li>category 1</li>
<li>category 2</li>
<li>category 3</li>
<li>category 4</li>
<li>category 5</li>
</ul>
</div>
<!-- About Information -->
<div class="col-md-2 AboutInfoCol-md-2">
<div class="nav nav-pills nav-stacked" id="columnMenuAbout">
My Artify ©
<br>
All Rights Reserved
<br>
Developed by <a>Imran Khan</a>
</div>
</div>
</div>
I want the class dividers to be LogoCol-md-2
both CategoryCol-md-2
vertically aligned in the middle (perfect middle) and want to keep AboutInfoCol-md-2
at the bottom.
If you are using Firefox, you can see that it is AboutInfoCol-md-2
distorted at 1080p window size .
I have a js fiddle. demonstration
Any help would be appreciated.
source to share
To enable usage vertical-align
, you need to set a value line-height
on the parent / container.
To ensure that the div stays at the bottom of the window, you must place it inside a wrapper / container that maintains 100% height (window size) and then add the following css to the element you want to stay at the bottom:
#about{
position: absolute;
bottom: 0;
}
UPDATE: After looking at Moob's answer (Thanks a lot), I was able to make a few changes and get it to work well in your example. Check out this Moob script update - http://jsfiddle.net/dj1betmv/6/
After seeing me update several times, I thought I'd leave the link I made myself in case anyone asks this question again - Demo
source to share
Update your CSS declarations AboutInfoCol-md-2
to remove positioning inherited from .col-md-2
and replace with your own:
AboutInfoCol-md-2 {
height: 10%;
position:absolute; /* position absolutely */
top:auto; /* reset top */
bottom:0; /* position at bottom */
transform: none; /* remove the transform:translateY */
}
source to share