Menu
I am trying to vertically align two elements with different heights in a div:
<div class="footer-icons">
<div id="footer-twitter">
<img src="images/twitter.png" width="40" alt="">
</div>
<div id="footer-fb">
<div class="fb-like" data-href="http://facebook.com/user" data-send="false" data-layout="button_count" data-width="160" data-show-faces="false" data-font="arial"></div>
</div>
</div>
The twitter div has a height of 40px, and the fb div has a height of 20px. What is currently happening is the fb div is vertically centered with the bottom edge of the twitter image. Here's the CSS:
.footer-icons {
padding-top:40px;
width:300px;
margin:auto;
text-align:center;
vertical-align:middle;
}
#footer-twitter {
display:inline-block;
}
#footer-fb {
display:inline-block;
}
What am I doing wrong?
205
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
To center a div vertically on a page, you can use the CSS position property, top property, and transform property. Start by setting the position of the div to absolute so that it's taken out of the normal document flow. Then set the top property to 50%.
you need to set the outer div to be displayed as a table and the inner div to be displayed as a table-cell — which can then be vertically centered. For Internet Explorer, you need to position the inner div absolutely within the outer div and then specify the top as 50%.
Approach: Create a div tag to place the images. In the <img> tag, provide the path of the images using the src attribute and an alternative text using the alt attribute. Add CSS properties to display the images in a vertical alignment.
Put the vertical align on the inner divs
#footer-twitter{
display:inline-block;
vertical-align:middle;
}
#footer-fb{
display:inline-block;
vertical-align:middle;
}
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
