Список по центру html: Как выровнять список по центру? — Хабр Q&A

css3 — Как выровнять нумерованный список по центру?

Вопрос задан 3 года 3 месяца назад

Изменён 2 месяца назад

Просмотрен 4k раз

Не получается выровнять пронумерованный список по центру. Пыталась заключить в дивы, просто выравнивала элементы списка — либо пропадает нумерация, либо все на странице съезжает незнамо куда. Не могу найти, как же всё — таки выровнять, помогите.

<ol>
  <li> МАТЕМАТИКА</li>
  <li> ИНФОРМАТИКА И ИКТ</li>
  <li> РУССКИЙ ЯЗЫК</li>
</ol>

• css3
• html5
• веб-программирование

.test{
width: 100%;
text-align:  center;
}
. center{
display: inline-block}
li{
text-align: left;
}

<div>
<ol>
  <li> МАТЕМАТИКА</li>
  <li> ИНФОРМАТИКА И ИКТ</li>
  <li> РУССКИЙ ЯЗЫК</li>
</ol>
</div>

Следует использовать свойство CSS list-style-position: inside

Свойство list-style-position устанавливает будет ли появляться маркер внутри пунктов списка или снаружи перед началом каждого пункта. Значение по умолчанию — outside, которое заставляет маркеры находится снаружи пунктов списка и не позволяет ему центрироваться вместе с содержимым.

Таким образом ваш код будет:

ol {
  /*Устанавливаем маркер/номер внутри пункта списка*/
  list-style-position: inside;
  /*Центрируем*/      
  text-align: center;
  
}

<ol>
  <li>МАТЕМАТИКА</li>
  <li>ИНФОРМАТИКА И ИКТ</li>
  <li>РУССКИЙ ЯЗЫК</li>
</ol>

Зарегистрируйтесь или войдите

Отправить без регистрации

Необходима, но никому не показывается

Отправить без регистрации

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — как выровнять теги li?

Вопрос задан

Изменён 5 лет 1 месяц назад

Просмотрен 2k раз

Делаю выравнивание всех трех тегов находящихся в одном Враппере, после чего не могу выровнять список, подскажите пожалуйста как сделать. спасибо

<div>
					<h2>Монтаж систем вентиляции и кондиционирования</h2>

					<ul>
						<li><i></i>Работаем без предоплаты</li>
						<li><i></i>скидки до 40%</li>
						<li><i></i>бесплатный выезд инженера</li>
					</ul>
					<a href="">Отправить заявку</a>
				</div>

	. header-content
		text-align: center
		h2
			font-size: 28px
			line-height: 30px
		ul
			li
				font-size: 16px

• html
• css

Скорее всего у вас у родительского блока стоит свойство text-align: center.

Если я правильно понял задачу то вам нужно сделать вот такую структуру

<div>
    <ul>
        <li>Работаем без предоплаты</li>
        <li>Скидки до 40%</li>
        <li>Бесплатный выезд инженера</li>
    </ul>
</div>

И задать стили обёртке в css:

.wrapper {
    text-align: left;
}
.wrapper ul {
  list-style: none;
}

Пример на JSFiddle

теги li по умолчанию прибиты влево, видать проблема в родительском блоке ,посмотри значени text-align

Если я правильно понял, то это можно сделать так:

    .
  wrapper {
        text-align: center;
    }
    
    .wrapper ul {
      display: inline-block;
      text-align: left;
    }

<div>
    <ul>
        <li>Работаем без предоплаты</li>
        <li>Скидки до 40%</li>
        <li>Бесплатный выезд инженера</li>
    </ul>
</div>

Если вы хотите выровнять только галочки, а текст оставить по центру, то вам помогут flex, псевдоэлементы и абсолютное позиционирование.

.header-content {
  text-align: center;
}
h2 {
  font-size: 28px;
  line-height: 30px;
}
ul {
  list-style: none;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
ul li {
  font-size: 16px;
}
ul li:before {
  position: absolute;
  left: 0;
  content: "\f00c";
  font-family: "Font Awesome\ 5 Free";
  -moz-osx-font-smoothing:grayscale;
  -webkit-font-smoothing:antialiased;
  display:inline-block;
  font-style:normal;
  font-variant:normal;
  text-rendering:auto;
}

<link href="https://stackpath. bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">

<div>
  <div>
    <h2>Монтаж систем вентиляции и&nbsp;кондиционирования</h2>

    <ul>
      <li>Работаем без предоплаты</li>
      <li>Скидки до 40%</li>
      <li>Бесплатный выезд инженера</li>
    </ul>
    <br>
    <a href="">Отправить заявку</a>
  </div>
</div>

Зарегистрируйтесь или войдите

Отправить без регистрации

Необходима, но никому не показывается

Отправить без регистрации

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

css — Как я могу центрировать в div?

спросил 13 лет, 7 месяцев назад

Изменено 1 год, 10 месяцев назад

Просмотрено 510 тысяч раз

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

 <таблица>
  
  
    
    
 
      
StudioTeknik.com
      


        Марк-Андре Менар
      <ул>
        
Цифровая фотография
        
Инфография 
        
Отладка и ИТ (MAC и ПК)
        
 Ретушь 
        
Сайт в Интернете
        
Графика
      
      
Cellulaire en suisse: +41 079573 48 99
      
Skype:  
 менардмам

    
Курриэль: archive.org/web/20100104192317/mailto:[email protected]"> [email protected]