middle aligning something not in a table, XHTML trans

phrozt · May 27, 2005

I'm trying to align an image in the middle of an element (div), and I can't figure out how to do it.

margin: auto; does't take care of it, and vertical-align: middle only works for table cells.

Can anyone help me w/this?

phrozt · May 27, 2005

Hmm.. let me clarify a few things after my first post.

I'm trying to VERTICALLY align something in the middle. Centering it horizontally is no problem

I'm making a multitude of these pages, and the images on each are different heights and widths. I'll also post the code I have so far, so that you may refer to it.

<div id="workRight">
<img class="feature" src="images/id_carbonic.gif" width="174" height="24" alt="carbonic" />
</div>

#workRight {
width: 200px;
height: 240px;
float: left;
text-align: center;
}

.feature {
margin: auto;
margin-top: 20px;
}

phrozt · Jun 1, 2005

anyone figure anything out for this?

Vragabond · Jun 1, 2005

I cannot test this in other browsers right now and I fear that it might not work, but this works with a doctype in IE6:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<style type="text/css">
#workRight {
    width: 200px;
    height: 240px;
    float: left;
    text-align: center;
    background: red;
    font-size: 215px;
    overflow: hidden;
    line-height: 1em;
}

.feature {
    vertical-align: middle;
}
</style>

<div id="workRight"><img class="feature" src="images/id_carbonic.gif" width="174" height="24" alt="carbonic" /></div>

Red background is there to help see the centering.

phrozt · Jun 2, 2005

well, that makes a little bit of difference on IE - it actually puts stuff low, but close to the middle, but it does nothing to mozilla at all :/

Thanks though!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

middle aligning something not in a table, XHTML trans

phrozt

IS-IT--Management

phrozt

IS-IT--Management

phrozt

IS-IT--Management

Vragabond

Programmer

phrozt

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor