Middle Align Category Menu

8 posts from 2 voices

• Started 2 years ago by vista
• Latest reply from Dude
• This topic is resolved

Tags:

No tags yet.

1. 

   vista
   Member

   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!

   Posted 2 years ago #
2. 

   Dude
   Dude

   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;
   }

   Posted 2 years ago #
3. 

   vista
   Member

   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.
   
padding:30px 10px 10px 10px;


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

   Posted 2 years ago #
4. 

   Dude
   Dude

   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.

   Posted 2 years ago #
5. 

   vista
   Member

   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.

   Posted 2 years ago #
6. 

   Dude
   Dude

   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;

   Posted 2 years ago #
7. 

   vista
   Member

   Hey thanks a lot dude!! :D

   Posted 2 years ago #
8. 

   Dude
   Dude

   Glad that I could help you :)

   Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.