Размещение содержимого div по центру

354

30 августа 2017, 13:49

Хочу разместить содержимое блока по центру, допустим это горизонтальное меню, как сделать чтобы не указывать ширину блоков, а они подстраивались автоматом под ширину содержимого

то есть:

<ul>
        <li>
            <a href="#">Item 1</a>
        </li>
        <li>
            <a href="#">Item 2</a>
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
        <li>
            <a href="#">Item 4</a>
        </li>
    </ul>

Что бы не указывать ширину ни у ul ни у блоков li

Answer 1

div { 
  padding: 10px; 
  background-color: #666; 
  text-align: center; // центруем строчные элементы 
} 
 
ul { 
  display: inline-block; /* правращаем в строчный (строчноблочный) элемент, 
  что бы сработало выравнивание и блок ужался до размеров контента */ 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  vertical-align: center; 
  text-align: left; // возвращаем стандартно позиционирование текста у левого края 
} 
 
li { 
  display: inline-block; 
  vertical-align: center; 
  padding: 4px; 
  background-color: #fff; 
}

<div> 
  <ul> 
      <li> 
          <a href="#">Item 1</a> 
      </li> 
      <li> 
          <a href="#">Item 22</a> 
      </li> 
      <li> 
          <a href="#">Item 333</a> 
      </li> 
      <li> 
          <a href="#">Item 4444</a> 
      </li> 
  </ul> 
</div>

Answer 2

ul{ 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
} 
ul li{ 
    list-style: none;     
} 
ul a{ 
    padding: 5px; 
    display: block; 
    border: 1px solid #ccc; 
} 
ul a:hover{ 
    background: #000; 
    color: #fff; 
}

<ul> 
    <li> 
        <a href="#">Item 1</a> 
    </li> 
    <li> 
        <a href="#">Item long text 2</a> 
    </li> 
    <li> 
        <a href="#">Item 3</a> 
    </li> 
    <li> 
        <a href="#">Item 4</a> 
    </li> 
</ul>