Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2636

    What I want to do is: I do not wish to have a description under the categories (second) menu, instead make the text vertical middle align in the box. What CSS edits do I have to do for that?

    Thanks!

    #38761

    Hey,

    replace following code in style.css:

    .catnav li a{
    display:block;
    float:left;
    padding:13px 10px 10px 10px;
    width:114px;
    border: none;
    text-decoration: none;
    line-height: 17px;
    outline: none;
    min-height:30px;
    }

    with:

    .catnav li a{
    display:block;
    text-align:center;
    padding:13px 10px 10px 10px;
    width:114px;
    border: none;
    text-decoration: none;
    line-height: 17px;
    outline: none;
    min-height:30px;
    }

    #38762

    Thanks.. I tried this already. But it just aligns the text in the center… but not in the middle of the box. how can I align it in the middle? Equal padding?

    Edit: I made the padding as following as its now in the center.

    Code:
    padding:30px 10px 10px 10px;

    Now my question, how do I control the height of these boxes?

    #38763

    Hey,

    I’m not aware of a methode which allows you to vertical align text within a div (yes you can create tables or use display:table-cell but that’s just a hack and doesn’t work with IE). The only chance you have is to change the padding. At the moment padding is:

    padding:13px 10px 10px 10px;

    Change 13px to any value you like – a higher value should push down the text.

    #38764

    Yeah I noticed that, It pushed it down but at the same time increases the size of the box. I am trying to make the boxes of fixed height. Not working out…. Perhaps kriesi could give some insight on this! Because changing the box height will also mean adjusting the CSS of the drop downs.

    #38765

    Hey,

    just decrease the padding bottom value…

    i.e. increase padding-top from 13px to 23px and decrease padding bottom from 10px to 0px – so

    padding:13px 10px 10px 10px;

    turns to:

    padding:23px 10px 0 10px;

    #38766

    Hey thanks a lot dude!! :D

    #38767

    Glad that I could help you :)

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Middle Align Category Menu’ is closed to new replies.