Centering elements vertically with css is something that often gives designers trouble. There are however a variety of methods for vertical centering and each is fairly easy to use. Today I want to present 6 of those methods. I’ve usually skipped over the topic of vertical centering, since there are some good posts already out there that are easy enough to find, but recently requesting a tutorial on vertically centering so I thought why not. You can view demos of each of the methods below. Clicking the images above each section will also take you to that specific demo. Let’s start by first talking about something that doesn’t work as many expect.
And why it doesn’t always work will help us better understand vertical centering in general. Vertical-Align is rather easy. When the element to be centered is an inline element we use text-align center on its parent.
Adobe pepper flash player for mac. When the element is a block level element we give it a width and set the left and right margins to a value of auto. With text-align: center in mind, most people look first to in order to center things vertically. It seems logical and I know it was my first choice. If you’ve come from table based layout you likely used the valign attribute, which would also lead you to believe vertical-align is the way to go. However valign only worked on table cells. Vertical-align is similar. It also applies to table cells and it works with some inline elements.
Ability to Left Justify, Center, or Right Justify Horizontal Alignment and Top, Center, and Bottom Vertical Alignment of Directory Photos 2. More Page Design Templates to choose from 3.
The values for vertical-align have meaning with respect to a parent inline element. • With a line of text the values are relative to the line-height.
• With a table cell the values are relative to the, which usually means the height of the row. Unfortunately doesn’t apply to block-level elements like a paragraph inside a div, which is where most of us figure out it isn’t the be all solution to vertical centering.
All is not lost though, as we have other methods for centering block level elements and we can still use vertical-align where appropriate. Which method you choose will depend on what you’re trying to center relative to its container element. Line-Height Method This method will work when you want to vertically center a single line of text. All we need to do is set a line-height on the element containing the text larger than its font-size.