CSS Forum

**Snot** · 08-10-2009, 04:54 PM

How do I vertically center text or add padding to it without moving the whole div?

Right now the text is sitting on the bottom of the div.

Code:

 #footer {
    color: #FFFFFF;
    background: url(images/bottom.jpg) repeat-x;
    font-weight: bold;
}

Thanks

**angele803** · 08-10-2009, 06:07 PM

If your text is in a paragraph tag, just add bottom padding to the paragraph.

**chrishirst** · 08-10-2009, 06:55 PM

**Snot** · 08-10-2009, 08:10 PM

When I don't use <p> tags it looks like it just needs to have to text centered vertically.

Code:

<div id="footer">&copy; 2006 all rights reserved.<img src="images/bottom.jpg" width="50" height="54" alt="Bottom Border"></div>

But when I add the <p> tags it changes the image behind the text and messes it up.

Code:

<div id="footer"><p>&copy; 2006 all rights reserved.<p><img src="images/bottom.jpg" width="50" height="54" alt="Bottom Border"></div>

Could I just make another div tag and set the text where I want it instead of having it in the same div as the image?

**TripleMoons** · 08-10-2009, 09:44 PM

Create a p.class.

For example...

CSS

Code:

p.footer {
    text-align: center;
    padding: 10px 0px;
}

HTML

Code:

<div id="footer"><p class="footer">&copy; 2006 all rights reserved.<p><img src="images/bottom.jpg" width="50" height="54" alt="Bottom Border"></div>

**Snot** · 08-10-2009, 10:57 PM

Oh Sweet!!!

Thanks so much for the help that worked great!!!

**Ninja** · 01:27 AM

1) Your css is adding and repeating the image so remove <img> from within your <div>

Code:

#footer {
    color: #FFFFFF;
    background: url(images/bottom.jpg) repeat-x;
    font-weight: bold;
}

Code:

<div id="footer"><p>&copy; 2006 all rights reserved.<p></div>

2) No need to add a class to <p> Style with

Code:

#footer p{
    text-align: center;
    padding: 10px 0px;
}