CODEWITHSUNDEEP
cssstylesheet
Maggy
Maggy

Reputation:

vertical, horizontal text in button

enter image description here

I have trouble to center align text (horizontal and vertical) on the dynamic navigation buttons. The buttons have set with and height that makes the button to have single or double line of text. I want the text center align either if there is single or double-row of text.

Right know I have "sheated" styled the buttons with double line of text with "top-margin" manually (see CSS declaration below),

#access li#menu-item-21 a {
    margin-top:3px; line-height:1.2em; height:27px;
}

But I don't want to set specific CSS declaration on the button with 2 rows of text.. I want to set same #access a styling for all the buttons..Is that possible to achieve this look?

link to my page

Should be a better way to solve that.

Upvotes: 0

Views: 169

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

You have a couple of #access a definitions. Replace them with this:

#access a {
    color: #fff;
    text-decoration: none;
    display:table-cell;
    vertical-align:middle;
    height: 35px;
    width:85px;
    text-align: center;
    line-height: 1em;

}

and get rid of the #access li#menu-item-21 a definitions for 2 line items.

Upvotes: 1

Related Questions