Posted: Sat Sep 12, 2009 10:44 pm Centering text on image in same container
Getting text to vertically center on an image can be a little tricky at times. Here are two methods for centering.
Text and image in same container without using floats:
The first thing needed is a container with an image and some text.
Code:
<p class="test">
<img src="image.gif" alt="" width="55" height="25" alt="" />Some text here
</p>
The text now appears at the bottom right corner of the image. So let's add a css rule to bring it up to center. But we don't add the rule for the text, rather to the image.
Code:
.test img {
vertical-align:middle;
}
Now the text has moved up to vertically center on the image. Add a little margin to the image to move the text away on the right side.
Text left and right with image vertically and horizontially centered:
This time were going to need floats, spans and a little ie trick.
When using floats in a container they must be cleared or they go outside the container. To clear the floats, the centered image must comes after the floats.
Notice the text links I'm using are to the bottom left of the image. We will have to apply a class to the container and to the text we want to be on the left and right, as the example text above. Applying some css rules to each class will make the text move to either side of the image while it remains centered.
Our first rule will be for the paragraph itself which will center the image.
Code:
.test {
text-align:center;
}
Now let's get the text in the right locations.
Code:
.left {float:left;}
.right {float:right;}
Now we have text to the left and right of a centered image but the text is aligned with the top of the image. That's fine if that's what you want but we want the text to be vertically centered on the image. So we add another attribute to the paragraph class. Setting the line height the same as the image height will vertically center the text.
Code:
.test {
text-align:center;
line-height:25px;
}
But wait, there's a small gap at the bottom of the container in IE. To see the gap add a border around the paragraph.
The easiest and quick way to get rid of this space is to remove browser defaults for padding and margins.
Code:
* {
padding:0;
margin:0;
}
Well that made things look better but the gap in IE is still there. This is where the trick come into play to get rid of the gap. We must set a height for the paragraph equal to the image height.
Now you have left and right text vertically centered on a horizontally centered image.
If you desire more control on how your pages display, use css resets like the ones here. Remember to always use a doctype.
If you want two images with text in the center, put image links inside the spans and add some text. CSS doesn't have to change except for line height to match your images height.
Code:
<p class="test">
<span class="left"><img class="" src="image.gif" alt="" width="55" height="25" /></span>
<span class="right"><img class="" src="image.gif" alt="" width="55" height="25" /></span>
Some text here
</p>
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
