Jump to content

How can i set vertical align inside a div which floats left on explorer 6 and 7


Recommended Posts

Hi i have been 4 divs with a height set and now i am trying to set the text to be vertical align:middle but it is not working on explorer 6 and 7 is that even possible or should i just use some <br /> tags to align the text on each div to display align in the middle.

 

I have found some that uses css top:50% but those just set line point to text to start which is not what i wanti want to be able to use vertical-align inside a set div without stype top

 

<div class="comments_outer">
        	<div class="comments_inner">
			<p>"The quality of the product is first class,since adding a HDTV portal to our website our hits are up 4000 a month! 20 new instructions, with 20 new delighted clients deciding to have their home filmed in order to sell it,brilliant." </p>
            </div>
	</div>


.comments_outer {
float:left;
display:table;
height: 160px;
width: 208px;
vertical-align: middle; 

}
.comments_inner { display:table-cell; vertical-align:middle; 	border-right:2px solid #000;
border-bottom:2px solid #000; }
.class_without_border .comments_inner{ border-right:none; }
.class_without_border{ width: 206px;}
.comments_outer p {	color: #515151;	font-size: 11px; font-style: italic; font-weight: bold;	padding:10px; }
.comments_author p {color: #515151;	font-size: 12px; font-style: italic; font-weight: bold;}
        

i am trying to set the text to be vertical align:middle but it is not working on explorer 6 and 7 is that even possible

You can set it, but it won't work, in any browser. Vertical:align only works in table cells and on inline elements such as images. Now, you could turn a div into a table cell by means of display:table-cell, but that still won't work in IE6/7.

 

What you can do to cross-browser vertically center text is use line-height. That goes as follows:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    text-align: center;
    font: normal 0.8em Arial;
    line-height: 200px;
}
h3 {
    margin-top: 0;
}
</style>
</head>
<body>
    <div><h3>Centered text</h3></div>
</body>
</html>

 

For all text tags (h, p, etc.) you have to set margin-top:0;. Which is a good idea anyway, to even out browser differences in text positioning.

Hi thanks for the help on my code above i did set the div as (.comments_inner { display:table-cell; vertical-align:middle; border-right:2px solid #000;) the only problem on my code is that it doesnt set the div height every works fine except the height of the div on exploere 6 and 7 the vertical works but the it cant set a certain height on the div i can set width but not height. is there a twist on my code to get it to work??

Sorry, I was too quick and thus missed the whole inner div thing.

 

But you can set the height of the outer div, can't you? Then just give the inner div a height:inherit and a line-height:inherit. Like so:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div#outer {
    width: 200px;
    height: 200px;
    line-height: 200px;
    border: 1px solid black;
}
div#inner {
    width: inherit; /* because of the float, which may give it a shrink-wrap */
    height: inherit;
    line-height: inherit;
    text-align: center;
    font: normal 0.8em Arial;
}
h3 {
    margin-top: 0;
}
</style>
</head>
<body>
    <div id="outer">
        <div id="inner"><h3>Centered text</h3></div>
    </div>
</body>
</html>

once again thanks for the help the height:inherit; almost did the job but now the problem is it doesnt pick up vertical-align: middle; i tried inherit that too but no effect this how my css looks like

.comments_outer {
float:left;
display:table;
height: 160px;
width: 206px;
vertical-align: middle;
border-bottom:2px solid red; 
border-right:2px solid red;
}
.comments_inner { display:table-cell; height:inherit; vertical-align: inherit; }



        <div class="comments_outer class_without_border">
        	<div class="comments_inner">
			<p>meant to vertical center center</p>          </div>
	</div>

once again thanks for the help the height:inherit; almost did the job but now the problem is it doesnt pick up vertical-align: middle; i tried inherit that too but no effect this how my css looks like

 

I told you to use line-height in stead of vertical-align. Why didn't you do that??

line height just seems to increase gap bettwen the line of the text imense this

is the page if you scroll down you see the how long the line height made it

http://www.homeonfilm.com/agentstest.php

 

this the css i got

.comments_outer {
float:left;
display:table;
width: 206px;
border-bottom:2px solid red; 
border-right:2px solid red;
}
.comments_inner { display:table-cell; height:inherit; line-height:160px; }

But what's wrong with this method then, that you seemingly already know, since that is the first Google hit of the search string 'how to center vertically css', and since you wrote: "I have found some that uses css top:50%"? It centers the text perfectly, also in IE7.

No if you get the chance if you look on it on firefox you'll see the text inside the divs they just like floating in the middle of the div like but on 7 it like the vertical align doesnt work the text starts on the same level which is meant to look like on firefox.

the div at bottom with red borders, on firefox vertical works but on ie7 or ie6 the vertical doesnt work

http://www.homeonfilm.com/agentstest.php

Sorry to say Lisa, but the way I see it, you've been given all the information that you need. There is a cross-browser way to have the text vertically centered -- the link I last gave you. I don't understand why you are not using that. 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.