Help, please, I just can not set the list in the center of the block. I have already tried to set text-align:center both for the block and for the list, and even margin:0 for the list I did, but it does not help either.

css:

 #menu { width: 100 % ; height: 40px; text-align: center } ul.top - menu { margin: 0 auto; /*border:1px solid black*/ } ul.top - menu li { width: 150px; height: 40px; line-height: 40px; float: left; /*border:1px solid black*/ }

html:

 <div id="menu"> <ul class="top-menu"> <li><a href="">Главная</a> </li> <li><a href="">Общение</a> </li> <li><a href="">Файлы</a> </li> <li><a href="">Новости</a> </li> <li><a href="">Биография</a> </li> </ul> </div>
  • The code in the studio! - Astor
  • @Roman Sokolov; To format a code, select it with the mouse and click on the {} button of the editor. - Nicolas Chabanovsky ♦
  • Try the answer below. - intertex


3 answers 3

Look, I hope will help. For the parent, add text-align: center ;, and for the child, display: inline-block; and everything works.

Good luck.

    Try this:

     Для текста- text-align:center !important; Для блока - margin:0 auto !important;

    ! important - used when overlapped by some other style. And so see the conflict in firebug-e. Looked at your code:

     #menu{ width: 100 % ; height: 40px; /*text-align: center - не нужно здесь */ } /*убрал пробелы между top-menu */ #menu .top-menu{ margin: 0 auto; /*border:1px solid black*/ } /*либо*/ #menu ul{ margin: 0 auto; padding: 0; /*border:1px solid black*/ } #menu li{ width: 150px; height: 40px; line-height: 40px; float: left; /*border:1px solid black*/ }

    Like so. Not tested.

      If you use a property like margin: 0 auto; then be sure to specify the width of the block, otherwise it will align.

      ul.top - menu {margin: 0 auto; / border: 1px solid black /}

      here you need to specify its width and all. width: 980px; then he will center

      • Does he not take the width from the parent block? - intertex
      • This is a block element, and a block element occupies 100% of the parent, so you must either: set a fixed width for it and set margin: 0 auto ;, or do it as suggested in the answer # 2. Good luck. - Astor