5 replies [Last post]
jstuardo
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-4
Joined: 2009-06-26
Posts: 44
Points: 51

Hello,

Can you please connect to Link and look at the menu "About", "How does it work", etc. The letters should appear centered vertically.

I used "vertical-align: middle;" but it did not work.

Thanks a lot in advance,
Jaime

jstuardo
Offline
Regular
Last seen: 9 years 3 weeks ago
Timezone: GMT-4
Joined: 2009-06-26
Posts: 44
Points: 51

jstuardo wrote: Hello, Can

jstuardo wrote:

Hello,

Can you please connect to Link and look at the menu "About", "How does it work", etc. The letters should appear centered vertically.

I used "vertical-align: middle;" but it did not work.

Thanks a lot in advance,
Jaime

when prompted, use "artefy" as the username and "artastic2" as password.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

This should do it

ul.menu_interior {
    font-size: 10px;
    margin-bottom: 40px;
    margin-left: 28px;
    }
 
ul.menu_interior li {
    background-color: #2A2A2A;
    display: inline-table;
    height: 30px;
    margin: 0 2px;
    text-align: center;
    vertical-align: middle;
    width: 19%;
    }
 
ul.menu_interior a {
    background-color: #2A2A2A;
    color: #CCCCCC;
    display: table-cell;
    text-decoration: none;
    vertical-align: middle;
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kevin619
kevin619's picture
Offline
Regular
Fremont,CA
Last seen: 8 years 14 weeks ago
Fremont,CA
Timezone: GMT+5
Joined: 2012-02-16
Posts: 24
Points: 28

If its not working just using

If its not working just using margin bottum or used padding.

Make sure you check out my>>App Designers Blog<<

The Clever Robot
The Clever Robot's picture
Offline
newbie
Winston Salem, NC
Last seen: 9 years 35 weeks ago
Winston Salem, NC
Timezone: GMT-5
Joined: 2012-11-29
Posts: 3
Points: 3

Vertical-align:middle in CSS

Vertical-align:middle in CSS does not do exactly what you are trying. I think you are referring to the table behavior. Here is a link to an article that explains it better than I can and offers several solutions or work arounds. Good luck! http://phrogz.net/css/vertical-align/index.html

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

@ The Clever Robot

Note that

  1. This thread is a month old. Although the OP did not respond to the answers he got, I imagine he's done with this problem.
  2. The link you posted offers two solutions. The first is the one I gave above.
  3. The second is a non-robust solution having little or nothing to recommend it other than it worked in IE6.
  4. There is a third solution that is a work-around for obsolete IE versions that I didn't mention because its expiry date has passed. If you're interested, see my article Centering inline elements vertically, from 2006. The method also works for block elements.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.