Solved

CSS Center Text in a li tag

Posted on 2010-08-25
15
460 Views
Last Modified: 2013-11-19
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
-------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>

Open in new window

nav-bar.jpg
0
Comment
Question by:MLSLI
15 Comments
 
LVL 13

Expert Comment

by:myderrick
ID: 33527084
Try using line-height for the <li> height elements. This will make the contents of the <li> stay in the middle.

Good luck.

MD
0
 
LVL 13

Expert Comment

by:myderrick
ID: 33527094
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
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33528514
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/lightEffects_but_sprite.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/
0
Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

 
LVL 5

Expert Comment

by:roxviper
ID: 33529251
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
 
0
 
LVL 4

Expert Comment

by:acashok
ID: 33529804
try with this:

#mainNav li {
            display:block;
            float: left;
            line-height:45px;
      }

hope this help
0
 
LVL 13

Expert Comment

by:myderrick
ID: 33530708
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
0
 

Author Comment

by:MLSLI
ID: 33532624
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
  • 0
     
    LVL 13

    Expert Comment

    by:myderrick
    ID: 33532702
    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


    0
     

    Author Comment

    by:MLSLI
    ID: 33533182
    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
    0
     
    LVL 13

    Expert Comment

    by:myderrick
    ID: 33533569
    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
    0
     

    Author Comment

    by:MLSLI
    ID: 33533609
    MD,

    Have you ever used the Display: property table or table-cell on <li> tags?

    I tried but have had no luck doing so
    0
     
    LVL 13

    Expert Comment

    by:myderrick
    ID: 33534324
    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
    0
     

    Accepted Solution

    by:
    MLSLI earned 0 total points
    ID: 33648215
    O.K after a lot of research and talking to a hi level professional this is what i came up with.

    #mainNav li a
    {    
            text-decoration:none;
            color: #000;
            text-align:center;
            height:28px;
          width:96px;
           
    display:table-cell;  < -- works in FF,chome, safari -->
    vertical-align:middle: <-- i first used center, not a property of vertical-align -->
         
      background-image: url(/images/15/lightEffects_but_sprite.jpg);
            background-repeat: repeat-x;
            background-position:legt top;

            padding: 5px 0px;
    }

    This needs hacks for IE7 and IE8. Changing display to block
    0
     
    LVL 58

    Expert Comment

    by:Gary
    ID: 39457814
    This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
    0

    Featured Post

    Ransomware: The New Cyber Threat & How to Stop It

    This infographic explains ransomware, type of malware that blocks access to your files or your systems and holds them hostage until a ransom is paid. It also examines the different types of ransomware and explains what you can do to thwart this sinister online threat.  

    Question has a verified solution.

    If you are experiencing a similar issue, please ask a related question

    Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
    What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    823 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question