Jump to content
  • 0

выравнивание списка с плавающими элементами


Ich
 Share

Question

как можно выровнять по центру экрана немаркированный список с элементами, которым присвоен float:left?

Пример вот https://jsfiddle.net/uo406sqj/1/ нужно чтобы выравнивалось по центру.

Если float отсутствует, то прекрасно работает text-align:center контейнеру и display:inline-block для списка, а вот как только появляется float у элемента списка - перестает работать. Можно ли как-то выровнять всё же?

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
1 час назад, Ich сказал:

как можно выровнять по центру экрана немаркированный список с элементами, которым присвоен float:left?

Пример вот https://jsfiddle.net/uo406sqj/1/ нужно чтобы выравнивалось по центру.

Если float отсутствует, то прекрасно работает text-align:center контейнеру и display:inline-block для списка, а вот как только появляется float у элемента списка - перестает работать. Можно ли как-то выровнять всё же?

Как вариант

ul {
	margin-left: auto;
  	margin-right: auto;
	width: 500px; /* Для примера. Без ширины отступы не сработают */
}

Но если не особо принципиально, какой display, то, конечно, display: inline-block самый нормальный вариант.

И не забывайте про clearfix.

Edited by BrusSENS
Link to comment
Share on other sites

  • 0

Спасибо, с фикс.шириной всё понятно, но всё как раз для того, чтобы от нее отказаться для адаптивности.

Clearfix добавил, но почему то всё равно выравнивается по левой стороне https://jsfiddle.net/uo406sqj/2/

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Almaz_Kazan
      Добрый день у class="fb7" не действует правило display block при уменьшении экрана на 721px
      Вот сайт http://mrdtools.com/exec/spin_template_ready/iphone_version/#
      ftp доступ:
      хост:  s5.thehost.com.ua
      логин: sabrina
      пароль: Iar862JZ
      Папка iphone_version
      Помогите пожалуйста 
    • By evgenia18
      Добрый день! 
      На данный момент прохожу обучение по веб-программированию, но уже сейчас хотело бы поработать с реальными проектами. 
      Знаю HTML, CSS, принципы адаптивной верстки, основы JavaScript и тд.
      Пример моей работы находится по адресу https://evgenia1991.github.io/
    • By Tempest
      Не могу понять,как убрать пробел под футером. Вроде блоки не выпирают 
       Вот исходный код http://www.cssdesk.com/J8Xk9

       
    • By 3pdt
      Адаптивная верстка за символическую плату (а может и бесплатно) с использованием Bootstrap. Пишите в л/с, договоримся.
      Пример:
      https://3pdt.github.io/eventide/
         
    • By nightgremlin
      Здравствуйте, уважаемые форумчане!
      Сто лет ничего не писал и ни за что не брался, и вот решился. Хочу восстановить и поднять свой уровень.
      У Вас есть шаблон psd, который надо сверстать? - Я к вашим услугам. Сделаю абсолютно бесплатно (ну может добавлю в портфолио).
      Вот, перечень предлагаемых услуг:
      верстка обычного psd-макета. С Вас макет - с меня верстка с использованием HTML5/CSS3; адаптивная верстка под различные разрешения экрана используя Media Queries; возможна натяжка на популярный движок WordPress. _____________________________________________________________________________________________________
      Так как совсем недавно начал изучение JavaScript, то могу попробовать написать что-то простенькое используя связку HTML5+CSS3+JavaScript (DOM). До библиотеки JQuery еще не добрался, но вставить готовый скрипт думаю сумею запросто.
      Задания присылайте на почту: pobedinskiy85@gmail.com
      P/s: никогда не занимался профессионально вёрсткой и написанием скриптов на JS, но то что вы мне предложите постараюсь выполнить качественно в приемлемые сроки.
       
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy