CODEWITHSUNDEEP
cssinternet-explorertextcentering
Matt
Matt

Reputation: 46

CSS Text centering with IE

I am currently working on a website and for the page titles / post titles i have a div to set color and some text in the center. It works fine on Chrome and Other Browsers but my text isn't centered vertically on IE.

Website on IE

Chrome

As you can see in the top image (IE) the text isn't entered vertically, where in chrome it is.

My CSS Code

h1 {
    font: 100% Coolvetica, Tahoma;
    font-size: 2.2em;
    text-align: left;
    position: absolute;
    padding-top: auto;
    margin-top: auto;
    margin-bottom: auto;
    left: 4%;
    width: 91.2%;
    height: 0%;
    color: #FFFFFF;
    z-index: 4;
}
#title {
    font: 100%;
    font-size: 1em;
    text-align: left;
    position: absolute;
    left: 0%;
    background: #161616;
    width: 100%;
    min-height: 3.7em;
    height: 3.5%;
    padding-top: 0%;
    margin-bottom: 5%;
    margin-top: 0%;
    color: #FFFFFF;
    -moz-box-shadow: 0px 13px 59px #000000;
    -webkit-box-shadow: 0px 13px 59px #000000;
    box-shadow: 0px 13px 59px #000000;
    z-index: 5;
}

My HTML Code

<div id="title">
<h1>
Hello Welcome to Our Online Shop!!!
</h1>
</div>

Hopefully that is enough information

Thanks Matt

Upvotes: 0

Views: 175

Answers (4)

MusikAnimal
MusikAnimal

Reputation: 2416

First off, on Mac OSX the text did not appear to be centered in Chrome 19.

See this JSBin: http://jsbin.com/apiqog/24/edit

If you are willing to ditch the percentage heights on div#title, you could set the same height to both div#title and h1, and also give h1 a line-height of the same amount.

I'm running a Mac so I don't have IE readily accessible, but I've found that setting the height and the line-height to be the same on a given element is a good approach to vertically align text therein, cross-browser.

Upvotes: 0

Chad
Chad

Reputation: 5428

You can set specific padding that will be rendered only by IE by putting a star before the style. 

*padding: 1em;

Play with that-- it might help.

Upvotes: 2

Chris Gessler
Chris Gessler

Reputation: 23123

I removed position:absolute for the H1 tag and it works fine in IE.

<html>
<head>
<style>

h1{ 
font: 100% Coolvetica, Tahoma; 
font-size:2.2em; 
text-align:left; 
/*position:absolute;*/ 
padding-top: auto; 
margin-top: auto;  
margin-bottom: auto;  
left: 4%; 
width: 91.2%; 
height: 0%; 
color: #FFFFFF; 
z-index:4; 
} 

#title{ 
font: 100%; 
font-size:1em; 
text-align:left; 
position:absolute; 
left: 0%; 
background:#161616; 
width: 100%; 
min-height:3.7em; 
height:3.5%;
padding-top:0%; 
margin-bottom:5%; 
margin-top:0%; 
color: #FFFFFF; 
-moz-box-shadow: 0px 13px 59px #000000; 
-webkit-box-shadow: 0px 13px 59px #000000; 
box-shadow: 0px 13px 59px #000000; 
z-index:5; 
} 
</style>
</head>
<body>
<div id="title"> 
<h1> 
Hello Welcome to Our Online Shop!!! 
</h1> 
</div> 
</body>
</html>

Upvotes: 2

Jayamurugan
Jayamurugan

Reputation: 1825

You can try css style attribute vertical-align:middle; for title div

Upvotes: 1

Related Questions