CSS Vertical Align Tutorial
Important Points of CSS Vertical-Align: An Inline Element Style
The Cascading Style Sheet (CSS) vertical-align property is usually considered one of the slightly tricky ones. Many beginners in web design and development or people who don’t work with CSS often tend to forget some important points. However, these points have to be kept in mind when trying to achieve vertical centering of an element. I must agree with those who don’t view CSS as a very friendly language for styling content, but trying to do front-end development without it isn’t very feasible unless you develop a site entirely in Flash.
The definition of the CSS vertical-align property, from the web site of w3schools.com, says that it, “sets the vertical alignment of an element.” It’s not specified that the element needs to be inline and not block level in order to work. Block level elements include tags such as , , , and thru . They cause content to display as “blocks” or “chunks” of content. Inline, also called text-level elements, include the , , anchor (), and line-break () tags. In other words, applying the CSS vertical-align property to a container (block level element) won’t cause that container’s child elements to be vertically centered. The exception to this rule is the tag.
Examples of the Use of CSS Vertical-Align
Almost all cases of the use of CSS vertical-align involve vertically centering text next to an image. This style can affect just one image or several images contained within the “box” area defined by a block level element. You could also use this property to vertically align all of the images (child elements) within all of the tags (block level) on a page if that’s what you wanted. The block level element might be thought of as the “parent.” Remember that the style must be applied to the child or inline tag and not to the block level one in order to work. For example, if you want to vertically center some text next to an image, you would apply this property to the tag, not to the block level tag that contains that image tag.
In the example code below, you can see that I have three images, each contained separately within the tags. I could have put all of them within one set of tags and used the line-break tag to “stack” them one on top of the other, but I simply wanted to use the easiest way to space them for this example. The screen shots that follow show the results of using the “middle” value for CSS vertical-align and also the “top” value. It’ll be difficult to actually see the subtle differences between some of the available values for this property such as “baseline” (the default) and “sub,” but there is a difference if you look closely. Some of the other values you can use are “super” and “text-top.”
The Code Behind the Style
Examples Not Involving Images
So, if you don’t use the example of vertically aligning text next to an image, what other one could you use? You can also see this CSS style in action if you vertically align text next to a text box for instance. The cases in which you’d want to do this are probably rare, but there might be a time when you need or want to. Instead of applying the style to the tag, you would apply CSS vertical-align to the inline tag contained in the block level tag.
There are also times when you need to vertically center text that isn’t next to an image or something visual like a text box. Unfortunately, that requires using different techniques because the vertical-align property won’t work. Some web designers resort to the use of invisible images or they manipulate line height to achieve vertical centering. Although tables should no longer be used to control layout, front-end development can be a headache when working with CSS. This is one of the reasons it’s very important to comment your code; you’ll be able to quickly refresh your memory regarding the techniques, and sometimes hacks that you used. If you’d rather avoid intense CSS coding, yet would like stylish web pages, you might want to read Simple and Free CSS Templates.
