By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,785 Members | 1,079 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,785 IT Pros & Developers. It's quick & easy.

vertically middle alignment of div

P: n/a
Hi
Can we align an image or content vertically middle in a DIV.
tks poonam
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Poonam wrote:
Hi
Can we align an image or content vertically middle in a DIV.


Just checked it, but "vertical-align:middle" does not work with DIVs.
So the only idea would be a table inside the div (yes, I know: bad
markup, bad semantics) and vertical-align on the TD.
Jul 20 '05 #2

P: n/a
ICHwesen wrote:
Poonam wrote:
Hi
Can we align an image or content vertically middle in a DIV.

Just checked it, but "vertical-align:middle" does not work with DIVs.
So the only idea would be a table inside the div (yes, I know: bad
markup, bad semantics) and vertical-align on the TD.


<div>
<img/>
</div>

img{
display:table-cell;
vertical-align:middle;
}

?

If you know the 'height' of the div you could do the following I think:

img{
line-height:height-div;
vertical-align:middle;
}

--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #3

P: n/a
<div>
<img/>
</div>

img{
display:table-cell;
vertical-align:middle;
}

?

If you know the 'height' of the div you could do the following I think:

img{
line-height:height-div;
vertical-align:middle;
}


Anne

I have tried this several times and ays , but for some reason it doesn't
work.
Am I missing here something?

<div style="height:100px; width:100px>
<img src="0.gif" width="50" height="50" style="display:table-cell;vertical-
align:middle; border:thin solid #000000">
</div>

I have also read dozens of advices to center horizontally thingalings with
"margin-left:auto; margin-right:auto; width:55em"
but obviously we need to add something to get it work...?
eh..?
huh..?
öh...

OllimaX!
Jul 20 '05 #4

P: n/a

"OllimaX" <ol*****@sunpoint.net> wrote in message
news:op**************@news.inet.fi...
<div>
<img/>
</div>

img{
display:table-cell;
vertical-align:middle;
}

?

If you know the 'height' of the div you could do the following I think:

img{
line-height:height-div;
vertical-align:middle;
}

Anne

I have tried this several times and ays , but for some reason it doesn't
work.
Am I missing here something?

<div style="height:100px; width:100px>
<img src="0.gif" width="50" height="50"

style="display:table-cell;vertical- align:middle; border:thin solid #000000">
</div>

I think IE (any version) does not support display: table-cell
HTH
David
Jul 20 '05 #5

P: n/a
tks for all the solutions but i think i missed to say i want to know only
img alignment in DIRECT div. i dont want to insert any tables or td or
anythg .

tks poonam

"David Graham" <da************@ntlworld.com> wrote in message
news:eH**************@newsfep1-gui.server.ntli.net...

"OllimaX" <ol*****@sunpoint.net> wrote in message
news:op**************@news.inet.fi...
<div>
<img/>
</div>

img{
display:table-cell;
vertical-align:middle;
}

?

If you know the 'height' of the div you could do the following I think:
img{
line-height:height-div;
vertical-align:middle;
}


Anne

I have tried this several times and ays , but for some reason it doesn't
work.
Am I missing here something?

<div style="height:100px; width:100px>
<img src="0.gif" width="50" height="50"

style="display:table-cell;vertical-
align:middle; border:thin solid #000000">
</div>

I think IE (any version) does not support display: table-cell
HTH
David

Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.