enter image description here I made a rubber menu, everything turned out, but I can not omit the menu items in the middle. I tried vertical-align , text-align and nothing works.

 *{ margin:0; padding:0; } div{ display:block; } body{ background:#444; } header { height:7%; width: 100%; background-color: #FFF; margin: 0 auto; border-bottom: 1px solid #000; } .right{ float:left; background-color: #000; width:15%; height:100%; } .menu{float:left; background-color:#f2f2f2; width:70%; height:100%; } .left{float:left; background-color: #000; width:15%; height:100%; } img{width:10%; Height:100%; background-color:#000; } ul{margin-left:10%; width:80%; height:100%; background-color:#cee2d3} li{ width:10%; height:100%; background-color:#669900} a{ text-decoration:none; color:#666;}

one 2 four 3

  • You should at least put a screenshot ... It’s not at all clear what you want. Or attach HTML & CSS code - Astor
  • I apologize, already added - V. Clerk
  • those. Do you need to vertically center the numbers in a block? codepen.io/astor/pen/dXxBrQ - Astor
  • Yes, thanks to your settings, everything turned out; it's a pity the line-height does not center as a percentage, not pixels. Thank you for help! - V. Clerk

1 answer 1

An inline element inside a block can be vertically aligned by setting a solid element to a block element, for example: height: 30px; and line-height: 30px;

Of course, this is only one of the many options for vertical centering)).

 ul { list-style-type: none; } li { float: left; margin-right: 5px; height: 30px; /* устанавливаем постоянную высоту */ width: 10%; background-color: #669900; text-align: center; line-height: 30px; /* устанавливаем line-height равный высоте элемента */ } a { display: inline-block; width: 100%; height: 100%; text-decoration: none; color: #666; } 
 <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul>