Center Menu Text Vertically

Home » Forums » Free DHTML Menu Builder » Center Menu Text Vertically


Ambassador
21 posts

Is it possible to center the menu text vertically? I was able to create a menu with a height of 40, but the text is aligned to the top. What I want to do is set the text to have a line-height of 40 pixels, so it lands in the center of the button. But, after looking at the JS code, I can't see an easy way to do this. I'm not sure exactly where the DIV's are created and they don't seem to have ID's that I could easily target with my stylesheet.

I'll attach an example of the code.
Attachments:


Senior Advisor
1,362 posts

Hi Joel,

I think this thread may be getting overlooked being way down the bottom.

I've put a call out for someone who can help with the code so hopefully someone will be in shortly to help. :) I know you believe you understand what you think I said...but I am not sure you realize that what you heard is not exactly what I meant.



Registered User
2,900 posts

Note entirely sure what you mean but...
try fiddling with these setting in your code?


var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right'

var MenuCentered='left'; // Menu horizontal position 'left', 'center' or 'right'

var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static
Have fun
~ Fe Pixie ~


Senior Advisor
3,916 posts

Maybe this will a little Joel
http://www.kellyinfo.com/web/padding.exe
or locate this line and change 0 to a 5
var TopPaddng=0; // Top padding


but it won't center the main button as it is wider then the rest, can only have one setting not individual. "It's A Smart Person That Asks"
http://bruzer.coffeecup.com



Ambassador
21 posts

I found a simple solution to my problem. Essentially, I wanted to center some individual items. I was able to add CSS code to the title of those items in order to center them. Here is a bit of the original JS code.

Menu1=new Array("ASSOCIATION","http://","",7,45,200);
Menu1_1=new Array("Membership","http://","",3,20,200);
Menu1_1_1=new Array("Why Join?","http://","",0,20,200);

And here you can see that I changed the title "ASSOCIATION" so that it had some style information around it.

Menu1=new Array("<p style=\"margin: 0; text-align: center; line-height: 45px\">ASSOCIATION</p>","http://","",7,45,200);
Menu1_1=new Array("Membership","http://","",3,20,200);
Menu1_1_1=new Array("Why Join?","http://","",0,20,200);

Now, my main menu is centered horizontally with the "text-align: center" attribute and it's centered vertically with the "line-height: 45px" attribute. That's it. Simple.


Senior Advisor
3,916 posts

Good Job Joel, I don't know much about CSS and didn't even think of it lol.
thanks for this tip. :) "It's A Smart Person That Asks"
http://bruzer.coffeecup.com


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.