This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Stylesheets > December 2003 > vertically middle alignment of div





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author vertically middle alignment of div
Poonam

2003-12-18, 8:46 pm

Hi
Can we align an image or content vertically middle in a DIV.


tks poonam


ICHwesen

2003-12-18, 8:46 pm

Poonam wrote:
quote:

> 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.
Anne van Kesteren

2003-12-18, 8:46 pm

ICHwesen wrote:
quote:

> Poonam wrote:
>
>
>
> 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/>
OllimaX

2003-12-18, 8:46 pm

quote:

> <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!
David Graham

2003-12-18, 8:46 pm


"OllimaX" <ollimax@sunpoint.net> wrote in message
news:opr0do1ksx5twr0h@news.inet.fi...
quote:

>
>
> 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-
quote:

> align:middle; border:thin solid #000000">
> </div>
>


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


Poonam

2003-12-24, 12:28 pm

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" <david.graham18@ntlworld.com> wrote in message
news:eHjEb.103$h97.77@newsfep1-gui.server.ntli.net...
quote:

>
> "OllimaX" <ollimax@sunpoint.net> wrote in message
> news:opr0do1ksx5twr0h@news.inet.fi...
think:[QUOTE][color=darkred]
> style="display:table-cell;vertical-
> I think IE (any version) does not support display: table-cell
> HTH
> David
>
>




Sponsored Links


Copyright 2003 - 2008 forum4designers.com  Software forum  Computer Hardware reviews