Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > vertical alignment

Reply
Thread Tools

vertical alignment

 
 
Spartaco
Guest
Posts: n/a
 
      03-20-2007
Hi, this is a big problem for me I can't solve it: I have a <div>, and I
want the content of this div be vertically aligned in the middle by applying
CSS styles to the div tag... I've tried the vertical-align but it does not
work, the content is always at the top.

Please help.

Best regards


 
Reply With Quote
 
 
 
 
Ben C
Guest
Posts: n/a
 
      03-20-2007
On 2007-03-20, Spartaco <(E-Mail Removed)> wrote:
> Hi, this is a big problem for me I can't solve it: I have a <div>, and I
> want the content of this div be vertically aligned in the middle by applying
> CSS styles to the div tag... I've tried the vertical-align but it does not
> work, the content is always at the top.


vertical-align aligns the inline contents of the div with respect to the
lines they're on, not with respect to the total height of the div.

You could set line-height on the div to the div's own height, but if the
lines break you will get an unwanted effect.

Your best option may be to use a table cell instead of a div (or apply
display: table-cell to the div). vertical-align on a table cell means
what you expect.
 
Reply With Quote
 
 
 
 
mardi
Guest
Posts: n/a
 
      03-21-2007
On Tue, 20 Mar 2007 15:38:49 +0000, Spartaco wrote:

> Hi, this is a big problem for me I can't solve it: I have a <div>, and I
> want the content of this div be vertically aligned in the middle by
> applying CSS styles to the div tag... I've tried the vertical-align but
> it does not work, the content is always at the top.
>
>

Hi, I am but a humble student of the css-fu. I had the same issue arise in
my studies and I did this:

div.container { top: 0; left: 0; width: 100%; height: 100%; position:
fixed; display: table }

div.cell { display: table-cell; vertical-align: middle }

then:

<div class="container">
<div class="cell">
<p>My Content</p>
</div></div>

This works for vertical alignment in the latest versions of Firefox (I
tried it in Linux and MS), Opera (Linux) and Konqueror (obvious ) but it
does not seem to work in IE 6 & 7.
 
Reply With Quote
 
Blinky the Shark
Guest
Posts: n/a
 
      03-21-2007
mardi wrote:
> On Tue, 20 Mar 2007 15:38:49 +0000, Spartaco wrote:
>
>> Hi, this is a big problem for me I can't solve it: I have a <div>, and I
>> want the content of this div be vertically aligned in the middle by
>> applying CSS styles to the div tag... I've tried the vertical-align but
>> it does not work, the content is always at the top.
>>
>>

> Hi, I am but a humble student of the css-fu. I had the same issue arise in
> my studies and I did this:
>
> div.container { top: 0; left: 0; width: 100%; height: 100%; position:
> fixed; display: table }
>
> div.cell { display: table-cell; vertical-align: middle }
>
> then:
>
><div class="container">
><div class="cell">
><p>My Content</p>
></div></div>
>
> This works for vertical alignment in the latest versions of Firefox (I
> tried it in Linux and MS), Opera (Linux) and Konqueror (obvious ) but it
> does not seem to work in IE 6 & 7.


I don't know anything about this site, but your findings seem to agree
with how it lists display:table:

http://www.quirksmode.org/css/display.html


--
Blinky RLU 297263
Killing all posts from Google Groups
The Usenet Improvement Project: http://blinkynet.net/comp/uip5.html
 
Reply With Quote
 
mardi
Guest
Posts: n/a
 
      03-21-2007
On Wed, 21 Mar 2007 02:59:35 +0000, Blinky the Shark wrote:
> mardi wrote:
>> On Tue, 20 Mar 2007 15:38:49 +0000, Spartaco wrote:
>>
>>> Hi, this is a big problem for me I can't solve it: I have a <div>, and
>>> I want the content of this div be vertically aligned in the middle by
>>> applying CSS styles to the div tag... I've tried the vertical-align
>>> but it does not work, the content is always at the top.
>>>

>> Hi, I am but a humble student of the css-fu. I had the same issue arise
>> in my studies and I did this:
>>
>> div.container { top: 0; left: 0; width: 100%; height: 100%; position:
>> fixed; display: table }
>>
>> div.cell { display: table-cell; vertical-align: middle }
>>
>> then:
>>
>><div class="container">
>><div class="cell">
>><p>My Content</p>
>></div></div>
>>
>> This works for vertical alignment in the latest versions of Firefox (I
>> tried it in Linux and MS), Opera (Linux) and Konqueror (obvious ) but
>> it does not seem to work in IE 6 & 7.

>
> I don't know anything about this site, but your findings seem to agree
> with how it lists display:table:
>
> http://www.quirksmode.org/css/display.html


Hi, thanks for the link, good info. I should have put in my original post
that I found the code here:

http://www.w3.org/Style/Examples/007/center.html
 
Reply With Quote
 
Blinky the Shark
Guest
Posts: n/a
 
      03-21-2007
mardi wrote:
> On Wed, 21 Mar 2007 02:59:35 +0000, Blinky the Shark wrote:
>> mardi wrote:
>>> On Tue, 20 Mar 2007 15:38:49 +0000, Spartaco wrote:
>>>
>>>> Hi, this is a big problem for me I can't solve it: I have a <div>, and
>>>> I want the content of this div be vertically aligned in the middle by
>>>> applying CSS styles to the div tag... I've tried the vertical-align
>>>> but it does not work, the content is always at the top.
>>>>
>>> Hi, I am but a humble student of the css-fu. I had the same issue arise
>>> in my studies and I did this:
>>>
>>> div.container { top: 0; left: 0; width: 100%; height: 100%; position:
>>> fixed; display: table }
>>>
>>> div.cell { display: table-cell; vertical-align: middle }
>>>
>>> then:
>>>
>>><div class="container">
>>><div class="cell">
>>><p>My Content</p>
>>></div></div>
>>>
>>> This works for vertical alignment in the latest versions of Firefox (I
>>> tried it in Linux and MS), Opera (Linux) and Konqueror (obvious ) but
>>> it does not seem to work in IE 6 & 7.

>>
>> I don't know anything about this site, but your findings seem to agree
>> with how it lists display:table:
>>
>> http://www.quirksmode.org/css/display.html

>
> Hi, thanks for the link, good info. I should have put in my original post


I just found that site today, in fact, doing some homework on the
display:table stlye. Looked like a good resource -- most of such sites
I've seen haven't made it past IE4 or so.

> that I found the code here:
>
> http://www.w3.org/Style/Examples/007/center.html



--
Blinky RLU 297263
Killing all posts from Google Groups
The Usenet Improvement Project: http://blinkynet.net/comp/uip5.html
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      03-21-2007
On Wed, 21 Mar 2007 06:39:07 GMT mardi scribed:

> On Wed, 21 Mar 2007 02:59:35 +0000, Blinky the Shark wrote:
>> mardi wrote:
>>> On Tue, 20 Mar 2007 15:38:49 +0000, Spartaco wrote:
>>>
>>>> Hi, this is a big problem for me I can't solve it: I have a <div>,
>>>> and I want the content of this div be vertically aligned in the
>>>> middle by applying CSS styles to the div tag... I've tried the
>>>> vertical-align but it does not work, the content is always at the
>>>> top.
>>>>
>>> Hi, I am but a humble student of the css-fu. I had the same issue
>>> arise in my studies and I did this:
>>>
>>> div.container { top: 0; left: 0; width: 100%; height: 100%;
>>> position: fixed; display: table }
>>>
>>> div.cell { display: table-cell; vertical-align: middle }
>>>
>>> then:
>>>
>>><div class="container">
>>><div class="cell">
>>><p>My Content</p>
>>></div></div>
>>>
>>> This works for vertical alignment in the latest versions of Firefox
>>> (I tried it in Linux and MS), Opera (Linux) and Konqueror (obvious
>>> ) but it does not seem to work in IE 6 & 7.

>>
>> I don't know anything about this site, but your findings seem to
>> agree with how it lists display:table:
>>
>> http://www.quirksmode.org/css/display.html

>
> Hi, thanks for the link, good info. I should have put in my original
> post that I found the code here:
>
> http://www.w3.org/Style/Examples/007/center.html


Re. above link, neither one of the examples work in IE 6.

--
Neredbojias
He who laughs last sounds like an idiot.
 
Reply With Quote
 
mardi
Guest
Posts: n/a
 
      03-22-2007
On Wed, 21 Mar 2007 05:26:36 -0500, Neredbojias wrote:

> On Wed, 21 Mar 2007 06:39:07 GMT mardi scribed:
>>
>> http://www.w3.org/Style/Examples/007/center.html

>
> Re. above link, neither one of the examples work in IE 6.


wow... really?

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Vertical alignment of textbox in edititemtemplate dba56 ASP .Net 0 04-14-2005 07:22 PM
Vertical Alignment Gone Wrong, One More Time Arondelle HTML 12 07-18-2004 07:54 AM
Vertical Alignment Jim Heavey HTML 10 03-03-2004 09:30 AM
Vertical alignment in a div Nik Coughin HTML 9 01-28-2004 10:08 PM
vertical alignment of the cell's contents ?? Luc HTML 2 01-19-2004 12:59 AM



Advertisments