Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS Vertically Align Text

Reply
Thread Tools

CSS Vertically Align Text

 
 
Trevor
Guest
Posts: n/a
 
      04-28-2006
Note the following html code:

<div id="linkbar">
<p>
links
</p>
</div>

Now take a look at this CSS:

#linkbar {
height: 30px;
text-align: center;
}

#linkbar p {
vertical-align: middle;
}

Why isn't the text in the div aligned vertically? What's the best way
to do what I want?

Thank you,
Trevor

 
Reply With Quote
 
 
 
 
Barbara de Zoete
Guest
Posts: n/a
 
      04-28-2006
On Fri, 28 Apr 2006 23:58:56 +0200, Trevor <(E-Mail Removed)> wrote:

> Note the following html code:
>
> <div id="linkbar">
> <p>
> links
> </p>
> </div>
>
> Now take a look at this CSS:
>
> #linkbar {
> height: 30px;
> text-align: center;
> }
>
> #linkbar p {
> vertical-align: middle;
> }
>
> Why isn't the text in the div aligned vertically?


Vertical align is a property that works with table cells only.


> What's the best way
> to do what I want?


Add display:table-cell; to the selector #linkbar p


--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
 
Reply With Quote
 
 
 
 
Neredbojias
Guest
Posts: n/a
 
      04-28-2006
To further the education of mankind, "Trevor" <(E-Mail Removed)>
vouchsafed:

> Note the following html code:
>
> <div id="linkbar">
> <p>
> links
> </p>
> </div>
>
> Now take a look at this CSS:
>
> #linkbar {
> height: 30px;
> text-align: center;
> }
>
> #linkbar p {
> vertical-align: middle;
> }
>
> Why isn't the text in the div aligned vertically? What's the best way
> to do what I want?


Add this line to #linkbar p {

line-height: 30px;


--
Neredbojias
Infinity has its limits.
 
Reply With Quote
 
Trevor
Guest
Posts: n/a
 
      04-29-2006
Awesome, thanks.

 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      04-29-2006
Barbara de Zoete wrote:

> Vertical align is a property that works with table cells only.


vertical-align also applies to images. (And other replaced content??)

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Now Playing ~ ./embrace/out_of_nothing/06_keeping.ogg

 
Reply With Quote
 
Barbara de Zoete
Guest
Posts: n/a
 
      04-29-2006
On Sat, 29 Apr 2006 16:15:39 +0200, Toby Inkster
<(E-Mail Removed)> wrote:

> Barbara de Zoete wrote:
>
>> Vertical align is a property that works with table cells only.

>
> vertical-align also applies to images. (And other replaced content??)


Ah. Thank you. Good to know.


--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
 
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
align Swing JLabels and JTextFields vertically with albert kao Java 6 04-26-2011 05:23 PM
How to align items vertically on a datagrid Julia B ASP .Net 5 01-30-2008 01:42 PM
how can align the text vertically in a table cell atin45gupt@gmail.com HTML 1 01-17-2006 04:25 PM
vertically align absolutely positioned div elements Guybrush Threepwood HTML 1 12-14-2005 09:29 PM
div Wont Vertically Align homer HTML 6 01-28-2005 05:04 AM



Advertisments