With a table cell the values are relative to the table-height-algorithm, which usually means the height of the row.With a line of text the values are relative to the line-height.The values for vertical-align have meaning with respect to a parent inline element. It also applies to table cells and it works with some inline elements. However valign only worked on table cells. 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. It seems logical and I know it was my first choice. With text-align: center in mind, most people look first to vertical-align in order to center things vertically. 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. When the element to be centered is an inline element we use text-align center on its parent. Horizontal centering with css is rather easy. Understanding vertical-align and why it doesn’t always work will help us better understand vertical centering in general. Let’s start by first talking about something that doesn’t work as many expect. Clicking the images above each section will also take you to that specific demo. You can view demos of each of the methods below by clicking here. 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 Bikram commented requesting a tutorial on vertically centering so I thought why not. Today I want to present 6 of those methods. There are however a variety of methods for vertical centering and each is fairly easy to use. Centering elements vertically with css is something that often gives designers trouble.
0 kommentar(er)
