Как позиционировать списки по центру экрана?

Question

[InqSEO]

Добрый день.
Прошу помочь с решением следующего вопроса:
Необходимо центрировать список ul по горизонтали, но при этом, чтобы дочерние элементы li позиционировались с левой стороны.
Как это выглядит сейчас:
Результат должен быть такой:


Если указать в стилях text-align: center, то дочерние элементы li тоже позиционируются по центру:
Пример: test.inqseo.com

ps: Дизайн адаптивный

Answer 1

[Zhainar]

.container { text-align: center; }
ul { text-align: left; }

Comments

[InqSEO]

Было бы так просто. Увы, не работает

[Zhainar]

InqSEO:
ul {
display: block;
margin: 0 auto;
}

[InqSEO]

Zhainar: Пробывал, не работает или у меня руки-крюки: test.inqseo.com

Answer 2

[Глеб Кемарский]

На свежую голову предлагаю сделать меню инлайн-блоком и назначать ему max-width через медиа-запросы. Инлайн-блок позволит отцентрировать меню внутри контейнера как обычный текст. Внутри меню картинки можно выровнять по левому краю — токе, как обычный текст, поскольку у вас элементы списка уже сделаны инлайнами. Максимальная ширина не позволит меню расползаться на весь экран, когда картинки перестанут помещаться в одной строке. Через медиа-запросы максимальную ширину можно менять или вообще отменять, когда нужна резина по всей ширине экрана. Суть решения: https://jsfiddle.net/glebkema/Lk00dfb3/

Инлайн-блок отличается от обычного блока тем, что не расползается до максимальной ширины, когда в меню только два пункта.

Для test.inqseo.com предлагаю добавить:

.types-wrapper {
  text-align: center;
}

#types .types-list {
  text-align: left;
  display: inline-block;
  max-width: 757px;
}

@media only screen and (max-width: 800px) and (min-width: 600px) {
  #types .types-list {
    max-width: 504px;
  }
  #types .types-list li {
    /* width: 45%; */
  }
}

Для других медиа-запросов нужно настроить дополнительно.

Вчера решал задачу так:

Подзадача 1. Отцентрировать меню внутри родителя, которому назначено относительное позиционирование. Решение — позиционировать меню абсолютно и сдвигать его с помощью transform.

Подзадача 2. Когда пункты меню не помещаются в одной строке и переносятся на вторую, меню расползается на всю ширину контейнера. Нужно, чтобы меню сузилось обратно. Решение — разделить меню на строки и в каждой оставить столько элементов, сколько помещается без переносов. Для этого элемент, который уже не поместится, надо назначить началом новой строки. На экранах разной ширины в строке будет разное количество элементов, поэтому используем медиа-запросы и для каждого задаём формулу nth-of-type.

Вчерашний результат: https://jsfiddle.net/glebkema/20rc3pb7/

Comments

[InqSEO]

max-width: 400px; - у меня адаптивный дизайн. Я не могу контейнеру приписать фиксированную ширину или ограничивать в определенных размерах

[InqSEO]

Глеб Кемарский: Другими словам, удалите лишнее и оставьте только 3 пункта в своем примере и вы поймете о чем я.

[Глеб Кемарский]

InqSEO: Вы хотите, чтобы меню плотно обхватывало пункты, без просветов справа?

[InqSEO]

Глеб Кемарский: ну конечно, это ведь адаптив. Я ведь не могу заранее просчитать размеры браузера пользователя, разве что взять стандартные и под них подстраиваться. А это топорный способ.

[Глеб Кемарский]

InqSEO: Вижу решение в два этапа.

Этап 1. Отцентрировать меню внутри родителя, которому назначено относительное позиционирование. Решение - позиционировать меню абсолютно и сдвигать его с помощью transform:
Как оцентровать блок, если его родитель релативен?

Этап 2. Как только элементы меню начинают переходить на вторую строку, меню расползается на всю ширину родителя. А нужно, чтобы меню компактно обнимало элементы и сидело в центре на любом экране и с любым количеством элементов.
Решение - адаптивная настройка колонок. К сожалению, в этой публикации пропали демки и иллюстрации, но текст и код на месте. Суть метода - для каждого медиа-запроса определять номера элементов, которые должны переходить на следующую строку.

Проверьте результат:
https://jsfiddle.net/glebkema/20rc3pb7/

Обновил свой ответ.

[Глеб Кемарский]

InqSEO: Переписал ответ, чтобы объяснить решение без чтения статей.

[Глеб Кемарский]

InqSEO: На свежую голову предлагаю решить задачу с помощью max-width. Его можно менять через медиа-запросы. И отменять, когда нужна резина по все ширине экрана. Суть решения - https://jsfiddle.net/glebkema/t1pbn70s/
Для test.inqseo.com предлагаю:

.types-wrapper {
  text-align: center;
}

#types .types-list {
  text-align: left;
  display: inline-block;
  max-width: 757px;
}

@media only screen and (max-width: 800px) and (min-width: 600px) {
  #types .types-list {
    max-width: 504px;
  }
  #types .types-list li {
    /* width: 45%; */
  }
}

Для других медиа-запросов нужно настроить дополнительно.

[InqSEO]

Глеб Кемарский: спасибо Вам Глеб, я тоже считаю, что это наилучший вариант. Я знал его ранее, но думал, возможно есть и другие решения. Тем не менее, спасибо за ваше потраченное время, за то что вникли в суть задачи и представили решение.

[Глеб Кемарский]

InqSEO: Спасибо за задачу. Можете поделиться, что в этом решении не устраивает?

[InqSEO]

Глеб Кемарский: почему же не устраивает, устраивает. Я думал, что есть более простые решения, чтобы обойтись без max-width. Я сам не верстальщик, посему возникают сомнения "правильно ли я делаю". Ну и конечно общаясь с профессионалами, сам многое узнаю.

[InqSEO]

Глеб Кемарский: если вы откроете mobile.css на test.inqseo.com, то вы увидите тот же способ, что и вы описывали.

[Глеб Кемарский]

InqSEO: Спасибо за ответ.
В test.inqseo.com/mobile.css вижу max-with только у delivery-info, а inline-block - у нескольких "...-item" и одного img. Но их всех нет в коде view-source:test.inqseo.com На что нужно посмотреть?

[InqSEO]

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

[Глеб Кемарский]

InqSEO: Так сложно оценить нюансы, но ограничения понятны. Спасибо за пояснение.

Для меня задача интересна тем, что в одних решения список растягивается шире, чем надо, а в других - нет.

Заметил, что дал неправильную ссылку. Правильно https://jsfiddle.net/glebkema/Lk00dfb3/ Отличие заметно, если оставить в списке один-два пункта. Исправил свой ответ и переписал его подробнее.

[InqSEO]

Глеб Кемарский: Да, Глеб, Это то что нужно! Спасибо за пример!

[Глеб Кемарский]

InqSEO: Этот пример добавляет что-то к тому, что уже знали? Удалось сделать, что хотели? Чем помочь?

Answer 3

[Максим]

codepen.io это пример

<div id="mainmenu">
   <ul>
       <li><a href="#"> Пункт 1 </a></li>
       <li><a href="#"> Пункт 2 </a></li>
       <li><a href="#"> Пункт 3 </a></li>
       <li><a href="#"> Пункт 4 </a></li>
       <li><a href="#"> Пункт 5 </a></li>
   </ul>
</div>

* {
    margin:0;
    padding:0
}
#mainmenu {
    position: relative;
    overflow:hidden;
    height:30px;
    margin:20px 0
}
#mainmenu ul {
    list-style:none;
    margin:0;
    padding:0;
    position: relative;
    left:50%;
    float:left;
    font:14px Arial, Helvetica, sans-serif;
    height:30px
}
#mainmenu ul li {
    position:relative;
    left:-50%;
    float:left;
    margin:0 5px;
    height:30px
}
#mainmenu ul li a {
    display:block;
    text-decoration:none;
    padding:4px 10px
}
#mainmenu ul li a:hover {
    background-color:#444;
    color:#ffffff
}

Источник

Comments

[InqSEO]

Попробую и обязательно отпишу

[Максим]

InqSEO: ответ выше от Zhainar тоже верный

Answer 4

[Иван Козлов]

Если ты знаешь точно сколько li должно вмещаться в строку, то можно посчитать ширину ul и сделать так:
codepen.io/trampick/pen/WwzXLX

Comments

[Максим]

это не адаптивно же , так делать плохо not worthy(имхо)

[Иван Козлов]

Максим Жаров: Про адаптив ничего не написано в вопросе. Так же ничего не мешает задавать ширину элементов в относительных единицах:)

[InqSEO]

Иван Козлов: да, извините, забыл указать, дизайн адаптивный.

[Максим]

Иван Козлов: 2016г говорить о фиксации контента - точно грех

[Иван Козлов]

Максим Жаров: понятно:))

[InqSEO]

Иван Козлов: Максим Жаров: Ребята, выложил пример ниже.

Answer 5

[Ксения Михайлова]

Попробуйте для списка растягивание содержимого по ширине:

#types .types-list {
    text-align: justify;
    text-align-last: center;
}

Comments

[InqSEO]

Хороший совет. Не полностью подошел, т.к. при text-align: justify; он почему-то выравнивает только 1ую строку (сам даже удивился). В итоге, 1ой строке расстояние между блоками товаров больше, чем во 2ом: joxi.ru/KAgJlDlTVGZa2l
НО, благодаря вашему способу, у меня появилась идея, попробую реализовать. Спасибо!

[Ксения Михайлова]

Для того, чтобы последние строки тоже выравнивались по ширине, надо добавить after-элемент:

ul:after {
content: '';
display: inline-block;
width: 100%;
height: 0;
}

[Ксения Михайлова]

InqSEO: тогда список считает, что после последнего элемента всегда что-то есть, и применят к этим линиям выравнивание по ширине.
Этот элемент может дать отступ по вертикали, потому что он все же инлайн-блоковый. Для ликвидации отступа добавьте нулевой размер шрифта родителю.

[InqSEO]

Ксения Михайлова: ну а если в последней строке будет всего 3 элемента, то получится вот такое: joxi.ru/52aej9jcWQz920

[Ксения Михайлова]

InqSEO: да, это минус justify. Поэтому в первом варианте я предложила вам text-align-last, который управляет выравниванием элементов в последней строке. У него какая-то ограниченная поддержка, но уже достаточная caniuse.com/#search=text-align-last

[InqSEO]

Ксения Михайлова: видите ли, невозможно предугадать, какое кол-во блоков будет в последней строке. А если 1? Ну вы понимаете да)))