CODEWITHSUNDEEP
htmlcssimagecentering
Coleen Holley
Coleen Holley

Reputation: 13

Overlay text over an image and align ALL center using only css and/or HTML

I've read through several posts regarding both overlaying text over an image, AND on centering. None of the answers work for my situation. Below is both the HTML and the CSS I'm using. Frankly - the only thing I've found that will work to center my image UNDER my text is to revert to using tags! I'm frustrated to say the least.

It "should" be really simple, but it's not!

#header
{
    height: 140px;
    position: relative;
     /*background: url('http://i105.photobucket.com/albums/m229/ayliea/ColeensDA_Avatar_zps7d63fb7c.jpg');
   background-color: #E7D4DE; for testing background colors*/
    background-repeat: no-repeat;
    background-position: center top;
    font-family: Segoe Script, Lucida handwriting, brush script mt, 
    monotype cosira, Apple Chancery, comic Sans MS Italic;
    top: 10px;
}
}
#header p
{font-size: 1.25em; font-weight: normal;}
#header .imgcenter
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    
    z-index:100;
}
.topcenter
{
    position: absolute;
    top: -20px;
    text-align: center;
    width: 100%;
    font-weight: bold;
    color: #0200a1;
    font-size: 1.5em;
    text-decoration: none;
} 
.topmiddle
{
    position: absolute;
    top:3.5em;
    text-align: center;
    width: 100%;
    padding: 4px;
    color: #c0c0c0;
    font-weight: bold;
    line-height:1.1em;
}
<div id="header">
         <img class="imgcenter" src="http://i105.photobucket.com/albums/m229/ayliea/ColeensDA_Avatar_zps7d63fb7c.jpg" alt="Aylissa"  />
     <div class="topcenter">
     <p><a href="default.aspx">Testing My text overlay with<br />trademark symbol and link<sup>&#174;</sup></a></p>
     </div>
     <p class="topmiddle">Second line of text that<br />
     needs centered on top of image</p> </div>

But unless I use the old-fashioned tag, I just can't seem to get the darn image to both center AND either show (sometimes it disappears!) or have the text overlay it correctly!

Can anyone help me with this issue?

P.S. I used the suggestions from here: http://www.the-art-of-web.com/css/textoverimage/ to do the overlay.

Thanks for any help.

Upvotes: 1

Views: 2141

Answers (1)

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

You are just missing to add text-align: center; to your #header

and, as a note, background-repeat: no-repeat; and background-position: center top; are useless properties in your css as it would just affect any image you add as background-image. It won't do anything with a html img

Second note: you can also get rid of margin-left: auto;, margin-right: auto; and z-index:100; in your .imgcenter for a cleaner css sheet (z-index won't ever work on any element unless you add a position NOT stactic in that element, position:static is the position of every single html element by default.)

Upvotes: 2

Related Questions