CSS Vertical Centering Text, Images and other Elements

Cascading style sheets make is very easy to center objects vertically. This may be an image or some text that you wish to align properly for whatever reason. For this tutorial we will demonstrate how to vertically align some text then an image using an easy and W3C compliant method. Then I will show you how to place text or images in the absolute middle or center.

Vertically Align Text:

1. Create a new HTML file in your favorite editor and let's begin by creating a container for our object that we want vertically centered:

[inline lang="HTML"]

<div id="container">
</div>

Next, add some text in a paragraph tag in between the div tags.

<div id="container">
<p>I am text, look at me!</p>
</div>

2. Apply the following CSS to the container div:

#container {
      display:table-cell;
      height:120px;
      vertical-align:middle;
}

Result:

Vertically Align an Image:

1. Now let's create another div container for our image we want vertically centered:

<div id="container_image">
</div>

Next, add an image in between the div tags.

<div id="container_image">
<img src="path/to/image.jpg"/>
</div>

2. Again, apply the following CSS to the container_image div:

#container_image {
      display:table-cell;
      height:120px;
      vertical-align:middle;
}

Result:

Horizontally and Vertically Align an Image:

1. For our last example, create yet another div container for our image:

<div id="container_image">
</div>

Next, add the image again in between the div tags.

<div id="container_image">
<img src="path/to/image.jpg"/>
</div>

2. Once more, apply the following CSS to the container_image div:

#container_image {
      display:table-cell;
      height:120px;
      vertical-align:middle;
}

#container img {
      margin:0 auto;
}

Result:

Related posts:

1. Open one panel at a time using ASP.Net AJAX Collapsible Panels In this short article I'll show you how to create a group of disconnected panels  that can be opened one at a time in either a vertical or horizontal orientation using elements placed anywhere on the page. Vertical ASP.Net AJAX Collapsible Panels: Horizontal ASP.Net AJAX Collapsible Panels: In the "Vertical" figure above, the panels are stacked [...]...
2. Modern CSS Typography and Font Styling Examples CSS& Design Check out my new article Modern Web Forn Options for Web Designers for my latest rundown of web font solutions Attractive CSS typography and styled fonts can add a lot to a user's experience on your website. Think of your website's typography as the foundation upon which your design is built. Typically, users [...]...
3. WordPress: Removing ‘Search For’ text from Search Box While I was customizing my WordPress theme I decided that the "Search for" text before the Search Box was unneccessary. This is how to take it out using CSS. This way, if you have to upgrade your WordPress version in the future you won't have to modify the general-template.php file again to comment out the [...]...