kitster79 Posted July 17, 2009 Report Share Posted July 17, 2009 (edited) Can someone tell me how to vertically position the text inside my anchor buttons so that they sit centered? Take a look so far... http://vojodesign.com/proofs/excel/website/incomeAndGrowthFund1.html I need the text in the blue buttons to be vertically centered. Thanks Edited July 17, 2009 by kitster79 Quote Link to comment Share on other sites More sharing options...
dms Posted July 17, 2009 Report Share Posted July 17, 2009 "The vertical-align property sets the vertical alignment of an element".... http://www.w3schools.com/Css/pr_pos_vertical-align.asp eg. vertical-align:middle; or, It seems to me that you could give each link a class such as one_line and two_lines. Set the line-height and then use padding to adjust each class? Just my two cents, but I'm still very new to this. I'm sure others will have a more concrete solution, but the vertical-align property came straight from w3schools.com. Mark Quote Link to comment Share on other sites More sharing options...
Wickham Posted July 17, 2009 Report Share Posted July 17, 2009 I don't think I've ever used vertical-align: middle except as a test and I don't remember seeing it used in other websites either. I prefer to use margin-top or padding-top with a class. w3schools says that vertical-align is used relative to a baseline:- Align the baseline of the element with the baseline of the parent element. This is default what this usually means is that if you have a image inline with text, the image will align its bottom with the bottom of the text so that it "sticks up" but if you use vertical-align: middle, the image will align its middle with the middle of the line of text. See http://www.wickham43.net/generaladvice.php#textalignvert This might not work where you use it just for one line of text, but you could try. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted July 17, 2009 Report Share Posted July 17, 2009 Looks like you got it centered. But what you can also do is... li {float:left;height:50px;line-height:50px;} Quote Link to comment Share on other sites More sharing options...
kitster79 Posted July 17, 2009 Author Report Share Posted July 17, 2009 Thanks Eric, but that does not solve the problem for the lines of text that have 2 lines, right? Quote Link to comment Share on other sites More sharing options...
virtual Posted July 17, 2009 Report Share Posted July 17, 2009 Change the text-align to "center" in this div #nav ul li { display: block; text-align: right; height: 50px; width: 283px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FFFFFF; } Quote Link to comment Share on other sites More sharing options...
kitster79 Posted July 17, 2009 Author Report Share Posted July 17, 2009 @ virtual....lol - i'm trying to center vertically, not horizontally!!! Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted July 17, 2009 Report Share Posted July 17, 2009 Thanks Eric, but that does not solve the problem for the lines of text that have 2 lines, right? no, your right, it doesn't. Did you get it centered though? It looks like you did! There is also the floating an extra container above the text method, like I did here... http://www.visibilityinherit.com/code/body-scroller-demo.php But, it seems like you need a method which will cater for a varible height. Paul, has a demo somewhere explaining that. May want to try googling "pmob varible height vertical centering". Quote Link to comment Share on other sites More sharing options...
virtual Posted July 17, 2009 Report Share Posted July 17, 2009 Lol...sometimes I can't tell left from right either Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.