Code:

div { background: #ff9438; height: 50px; border-radius: 10px; } ul { height: 100%; text-align: center; } li { margin: 0; width: 200px; height: 100%; display: inline-block; color: #fff; font-family: sans-serif; font-size: 1.5em; font-weight: 600; } li:hover { background: #f2efef; color: #bcbcbc; } 
 <div> <ul> <li>MENU1</li> <li>MENU2</li> <li>MENU3</li> <li>MENU4</li> </ul> </div>

It is necessary:

  1. The text inside li is centered. I can not understand how this can be done as simply as possible (not counting the manual selection of padding-top ).
  2. How can I stretch the text to the full height inside li ?

    3 answers 3

     div { background: #ff9438; height: 50px; border-radius: 10px; } ul { height: 100%; text-align: center; } li { display: block; float: left; line-height: 2.25em; font-size: 1.5em; margin: 0; width: 200px; height: 100%; color: #fff; font-family: sans-serif; font-weight: 600; } li:hover { background: #f2efef; color: #bcbcbc; } 
     <div> <ul> <li>MENU1</li> <li>MENU2</li> <li>MENU3</li> <li>MENU4</li> </ul> </div>

    There are a lot of solutions. One of

    • There are a lot of methods for solving this problem, but so far the three answers have the same one. - Alexey Ukolov
    • @ BlackStar1991 your menu items have gone down (only 4 menu items), edit the answer - Arsen
    • All follow the path of least resistance) You can implement this through positioning. It is possible through flex-box. Just write laziness, more code. Perhaps you can still somehow ...) - BlackStar1991
    • Thanks, it helped. Can the question be off topic? What is the difference between using float: left and display: inline-block ? Which option is more priority? - user238511
    • display: inline-block Use more correctly. You don’t need to "clean up" behind him - BlackStar1991

    The simplest and cross-browser solution is to specify li a line height equal to the height of the menu:

     li { line-height: 50px; }

    Of course, it is assumed that you have the text of each menu item will fit into one line.

    • and if the text in two lines? - Sergiy mk

     div { background: #ff9438; height: 50px; border-radius: 10px; } ul { height: 100%; text-align: center; } li { text-align: center; margin: 0; width: 24%; height: 100%; display: inline-block; color: #fff; font-family: sans-serif; font-size: 1.5em; font-weight: 600; line-height: 50px; float: left; list-style: none; } li:hover { background: #f2efef; color: #bcbcbc; } 
     <div> <ul> <li>MENU1</li> <li>MENU2</li> <li>MENU3</li> <li>MENU4</li> </ul> </div>