Trying to make a menu with LI and center the text of the links. And to indent between the links was not. But, unfortunately, nothing comes out: the text is not aligned vertically, and the indents between the elements are preserved.

ul.menu { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; height: 100px; } ul.menu li { display: inline-block; padding: 0; margin: 0; height: 100%; width: 75px; background-color: red; text-align: center; } 
 <div style="width:100%"> <ul class="menu"> <li><a>some</a></li> <li><a>some</a></li> <li><a>some</a></li> </ul> </div>

What is done here is not true. help me please

  • for LI added "line-height: 100px" but not working line-height: 100%, it turns out somehow not adaptive ... is there a more correct option? - simply good

3 answers 3

1. inline-block

1) If the height of the menu is 100px , then single-line items can be centered vertically using the line-height: 100px; .

2) Inline blocks behave like words in a sentence: the spaces between them and the line breaks turn into unnecessary gaps. In English, CO collected ways to combat this scourge .

 ul.menu { background-color: #333; list-style-type: none; margin: 0; padding: 0; } ul.menu li { background-color: red; display: inline-block; line-height: 100px; text-align: center; width: 75px; } 
 <div style="width:100%"> <ul class="menu"> <li><a href="#">some</a></li><!-- --><li><a href="#">some</a></li><!-- --><li><a href="#">some</a></li> </ul> </div>

2. table-cell

You can make the menu items behave as if they were table cells:

 ul.menu { background-color: #333; list-style-type: none; margin: 0; padding: 0; } ul.menu li { background-color: red; display: table-cell; height: 100px; text-align: center; vertical-align: middle; width: 75px; } 
 <div style="width:100%"> <ul class="menu"> <li><a href="#">some</a></li> <li><a href="#">some</a></li> <li><a href="#">some</a></li> </ul> </div>

  • one
    @simplygood Added a fixed solution through inline blocks. - Gleb Kemarsky

As an option:

 ul.menu { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.menu li { float: left; } ul.menu a { display: block; width: 75px; height: 100px; background: red; text-align: center; text-decoration: none; line-height: 100px; color: #fff; } ul.menu a:hover { background: silver; color: #000; } 
 <ul class="menu"> <li><a href="#">some1</a> </li> <li><a href="#">some2</a> </li> <li><a href="#">some3</a> </li> </ul>

    I can suggest you use flex.

     ul.menu { list-style-type: none; padding: 0; background-color: #333; height:100px; display: flex; } ul.menu li{ display: flex; align-items: center; justify-content: center; height:100%; width:75px; background-color:red; } 
     <div style="width:100%"> <ul class="menu"> <li><a>some</a></li> <li><a>some</a></li> <li><a>some</a></li> </ul> </div>

    • With flex, it behaves (on my moma) like a normal div, without any alignment, as a result, I used line-height: 100px; and wrote tags without transferring to a new line - simply good