MLSLI
asked on
CSS Center Text in a li tag
I have a Navigation bar created in CSS. I would like to verically center the text with in the <li> tag.
The catch is that some of the nav text will have 2 lines. See attachment.
So i would like to get the 1 liners vertically centered. Is this possible?
I have attached sample code
The catch is that some of the nav text will have 2 lines. See attachment.
So i would like to get the 1 liners vertically centered. Is this possible?
I have attached sample code
-------CSS--------
#mainNav {
font-size:11px;
height:45px;
margin: 0px;
padding: 0px;
}
#mainNav li {
display:block;
float: left;
margin-top: 7px;
}
#mainNav li a {
text-decoration:none;
color: #000;
text-align:center;
height:28px;
width:96px;
padding:0px 0px 5px 0px;
display:block;
background-image: url(/images/15/lightEffects_but_sprite.jpg);
background-repeat: repeat-x;
background-position:legt top;
}
ul#mainNav {
list-style-type: none;
}
#mainNav li a:hover {
color:#000;
display:block;
background-image: url(/images/15/lightEffects_but_sprite.jpg);
background-repeat: repeat-x;
background-position: left bottom;
}
------HTML ------------
<ul id="mainNav">
<!-- CSS Tabs -->
<li><a href='/listings/OpenHouses.aspx'>Office Open Houses</a></li><li><a href='/listings/Sold.aspx'>Our Sold Properties</a></li><li><a href='/listings/Default.aspx'>My Office Listings</a></li><li><a href='/news/Guides.aspx'>Buyer & Seller Info</a></li><li><a href='/Demographics.aspx'>Neighborhoods/
Schools</a></li><li><a href='/Cma.aspx'>Market Analysis Lead </a></li><li><a href='/Calcs.aspx'>Financial Calculators</a></li><li><a href='/Videos.aspx'>Consumer Video Tips</a></li><li><a href='/Contact.aspx'>Contact Us</a></li><li><a href='/Custom1.aspx'>Links</a></li>
</ul>
nav-bar.jpg
One more thing is you have to make sure the height is enough to accomodate the double line for the items with two lines.
MD
MD
another method is to update <<#mainNav li a>> to update the padding to
#mainNav li a
{
text-decoration:none;
color: #000;
text-align:center;
height:28px;
width:96px;
display:block;
background-image: url(/images/15/lightEffect s_but_spri te.jpg);
background-repeat: repeat-x;
background-position:legt top;
padding: 5px 0px;
}
also try vertical align
http://www.w3schools.com/css/pr_pos_vertical-align.asp
However, i think line height answer given by fellow expert above is the best answer
more solutions here
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
#mainNav li a
{
text-decoration:none;
color: #000;
text-align:center;
height:28px;
width:96px;
display:block;
background-image: url(/images/15/lightEffect
background-repeat: repeat-x;
background-position:legt top;
padding: 5px 0px;
}
also try vertical align
http://www.w3schools.com/css/pr_pos_vertical-align.asp
However, i think line height answer given by fellow expert above is the best answer
more solutions here
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
Hi,
Personally I use padding for vertical align the text in menus. For example if you have a height of 25px on the menu, I put a padding-top of 10px; on the <a> tag and I make the height 15px.
See if it helps you
Personally I use padding for vertical align the text in menus. For example if you have a height of 25px on the menu, I put a padding-top of 10px; on the <a> tag and I make the height 15px.
See if it helps you
try with this:
#mainNav li {
display:block;
float: left;
line-height:45px;
}
hope this help
#mainNav li {
display:block;
float: left;
line-height:45px;
}
hope this help
Exactly what I suggested. The padding option will do but you have to deal with IE and its issues with paddings and margin.
Let us wait for the author to respond and we'll advise later.
MD
Let us wait for the author to respond and we'll advise later.
MD
ASKER
Thanks for all who responded.
myderrick: Line-height doesn't work because it makes the 2 lines spread out. see image attached
gurvinder372: Padding or Margin doesn't work because it moves all the text down without vertically centering the one liners.Also Vertical-align: doesn't work on a tag. I tried changing the display:table; or display:table-cell; doesn't see to take.
Thanks for the effort
myderrick: Line-height doesn't work because it makes the 2 lines spread out. see image attached
gurvinder372: Padding or Margin doesn't work because it moves all the text down without vertically centering the one liners.Also Vertical-align: doesn't work on a
Thanks for the effort
Line-hieght makes the 2 lines spread out? That shouldn't be happening as the line-height property works on the height and not width.
You must specify the height to accommodate the 2 lines and remove any extra paddings that you do not require.
Good luck
MD
You must specify the height to accommodate the 2 lines and remove any extra paddings that you do not require.
Good luck
MD
ASKER
Sorry myderrick must be a small miss communication here.
Its not spreading out in width it's... spreading in height ** See attached image * *******
I really don't need the 2 lines centered in the i need the 1 liner vertically center within the
. So i am assuming that i need to use a % or auto. Can it be done?
line-height.jpg
Its not spreading out in width it's... spreading in height ** See attached image * *******
I really don't need the 2 lines centered in the
Now that complicates the problem. You can use tables for just the menus. That solves all the problems
Or
You could figure out which of these will help. Either way, it is complicated.
I will try and work something out but before then, Good Luck
MD
Or
You could figure out which of these will help. Either way, it is complicated.
I will try and work something out but before then, Good Luck
MD
ASKER
MD,
Have you ever used the Display: property table or table-cell on <li> tags?
I tried but have had no luck doing so
Have you ever used the Display: property table or table-cell on <li> tags?
I tried but have had no luck doing so
No. I haven't.
For the one line to center, you need to use line-height and specify a width for the entire #mainNav as well as the <li>. The only problem I have now is the 2 line items. Once you use line-height they will spread out downward.
Have you consodered using a table for the menu?
OR
Any of these ideas:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
MD
For the one line to center, you need to use line-height and specify a width for the entire #mainNav as well as the <li>. The only problem I have now is the 2 line items. Once you use line-height they will spread out downward.
Have you consodered using a table for the menu?
OR
Any of these ideas:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
MD
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
Good luck.
MD