...

View Full Version : Centering Images in a div



ScottInTexas
09-27-2007, 01:40 PM
How the heck are you supposed to get images centered within a div if the center tag has been deprecated?



<div id="otherlinks">
<span class="smallText">Proud member of ICEA</span>

<span class="logospan"><a href="http://www.iceaweb.org/mc/page.do" target="_blank"><img src="icealogo.gif" width="60" height="45" alt="ICEA Logo" /></a></span>
<span class="smallText">Eagle River Chamber of Commerce</span>
<span class="logospan"><img src="coclogo.jpeg" width="60" height="45" alt="COC Logo" /></span>
<span class="smallText">Traingle Concierge-Consulting and Training</span>
<span class="logospan"><a href="http://www.triangleconcierge.com" target="_blank"><img src="conciergedir.jpg" width="60" height="45" alt="Traingle Logo" /></a></span>
</div>




.smallText
{
font-family:verdana;
font-size:.6em;
text-align:center;
}

.logospan
{
text-align:center;
border:none;
}



Thanks.

VIPStephan
09-27-2007, 01:54 PM
How the heck are you supposed to get images centered within a div if the center tag has been deprecated?

With text-align: center; applied to the parent element (the div in your case). All inline content (i.e. text and elements) can be centered like that.

ScottInTexas
09-27-2007, 02:32 PM
Thanks VIP,

The div css is below. It is set text-align:center. That's why I'm going nuts!


div#otherlinks
{
position:absolute;
top:37.5%;
left:0;
width:14.4%;
height:25%;
text-align:center;
}

_Aerospace_Eng_
09-27-2007, 02:58 PM
That should work so that means there is likely something else not allowing you to center your images. Can you post the rest of your CSS or a link to your site please? I'm guessing you some how made your images display:block.

CaptainB
09-27-2007, 04:59 PM
Sorry if I'm hijacking this thread, but does the "text-align:center;" tag also apply to the divs INSIDE that div? Cause I can't seem to get that work.

_Aerospace_Eng_
09-27-2007, 05:00 PM
No text-align:center; only applies to inline elements like links, spans, and images. To get a div centered inside of another div you need to use margin:auto; on the div inside of the parent div. IE6 (not sure about IE7) will incorrectly center a block level element if its parent element has text-align:center;

CaptainB
09-27-2007, 05:29 PM
Thanks _Aerospace_Eng_, now it makes scence! I have been wondering about that for some time now, cause every time I try, it dosn't work. Now I get it :thumbsup:

EDIT: Lol, sorry on the name. Changed.

_Aerospace_Eng_
09-27-2007, 06:44 PM
Thanks Dave, now it makes scence! I have been wondering about that for some time now, cause every time I try, it dosn't work. Now I get it :thumbsup:

I'm not Dave but you're welcome.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum