Как упорядочить упорядоченный номер списка в HTML

В настоящее время я изучаю HTML-программирование. У меня проблема:

Если я сделаю следующее:

<html>
<body align="middle">
HEADLINE
<ol>
<li>First Item</li>
</ol>
</body>
</html>

Проблема заключается в том, что число (1.) находится слева, когда я хотел, чтобы он был выровнен под заголовком. Как я могу получить весь элемент списка посередине?

Мне нужно по меньшей мере 10 репутации, чтобы добавить фотографии, поэтому я приведу ссылку на другой веб-сайт, чтобы вы могли увидеть картинку: ALIGNING

Ответы

Ответ 1

Вы выравниваете тексты в теле.

Попробуйте следующее:

.center {
  text-align: center;
  list-style-position: inside;
}
<h4 align="center">HEADLINE</h4>
<ol class="center">
  <li>First Item</li>
</ol>

Ответ 2

Nikolas, выравнивание чисел в упорядоченном списке в CSS выглядит следующим образом:

     ol
    {
       display: inline-block;
       margin-left: auto;
       margin-right: auto;
    }

** Вы должны использовать блок отображения, потому что вам нужно поместить свой список в поле, чтобы он центрировал числа со списком.

Ответ 3

В дополнение к ответу Нуну Дуарте вы можете добавить перерывы после номеров номеров, которые (я думаю) делает его лучше выглядеть в центрированном режиме. (отказ от ответственности: не проверен в браузерах)

.text-center {
    text-align: center;
}
ol.text-center {
    list-style-position: inside;
    padding-left: inherit; /*Get rid of padding to center correctly*/
}
    ol.text-center > li::before {
        content: "\A";
        white-space: pre;
    }
<h4 class="text-center">HEADLINE</h4>
<ol class="text-center">
  <li>First Item</li>
</ol>

Ответ 4

Это очень старый пост, но это решение, которое я сделал.

CSS:

.center
{
 text-align: center;
 list-style-position: inside;
}
ol.center li
{
 text-align: left;
 margin-left: 45%;
}

HTML

<ol class="center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, repellat.
<li>List1<li>
<li>List2<li>
</ol>

Конечный результат будет выглядеть так: Output