Did you try HTML items to align vertical? Is it difficult? Probably it is a problem that has frustrated web developers & some designers everywhere. But don’t worry, in this article, we are going to learn few tricks that can help you in vertical alignment.
Let’s talk about vertical alignment in CSS. There are not any official way in CSS to center content vertically within its container. Actually we can align HTML items vertical with different ways. In this article we’re going to learn about it.
1. Flexbox
Latest method to vertical alignment is by using Flexbox. Flexbox is a new module in CSS3. Flexbox offers the most simple method for align content. To align center the content vertically in flexbox, simply align-items:center; add as follows, and that’s all.
See the Pen Align Content Vertically with Flexbox by Web Mantras (@webmantras) on CodePen.dark
Make sure that some old browsers not supporting Flexbox. It is fully supported by Internet Explorer 11, Safari 7, and Chrome 33 and newer.
2. CSS3 Transform
CSS3 Transform element has made easy to align content at vertically center. In HTML, you need one parent & one child element.
See the Pen Align Content Vertically with CSS3 Transform by Web Mantras (@webmantras) on CodePen.dark
Please note that CSS3 Transform will work in Internet Explorer 10 & Google Chrome 30 or newer browsers.
3. CSS Table-cell
CSS Table is done by setting the parent element display to table, while the child element is to be displayed as table-cell & then use the vertical-align property to align table-cell content vertically.
See the Pen Align Content Vertically with CSS3 Table-cell by Web Mantras (@webmantras) on CodePen.dark