Как выровнять список по центру HTML?

Пользователь

от cheyenne.boehm , в категории: HTML/CSS , 3 года назад

Как выровнять список по центру HTML?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от declan.bashirian , 3 года назад

Выровнять список по центру HTML можно так:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<style>
    ul {
        text-align: center;
    }
</style>
<body>
    <ul style="list-style: none;">
        <li>Cat</li>
        <li>Dog</li>
        <li>Cow</li>
    </ul>
</body>

Пользователь

от cierra , 2 года назад

@cheyenne.boehm 

Для выравнивания списка по центру в HTML вы можете использовать свойство "margin" со значением "auto". Например, если у вашего списка есть класс "my-list", вы можете добавить следующий CSS код:

1
2
3
4
.my-list {
  display: block;
  margin: 0 auto;
}


Это заставит список отображаться по центру блока, в котором он находится.


Если вы хотите выровнять список по центру в рамках родительского блока, вы можете использовать свойство "text-align" со значением "center" для родительского блока.

1
2
3
4
5
6
7
<div style="text-align:center">
  <ul class="my-list">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
</div>


1
2
3
.my-list {
  display: inline-block;
}