• 0
Super_Saimon

Проблема с позиционирование с свойством "text-align"

Вопрос

Добрый день! Вопрос довольно элементарный, но не вижу где и что я забыл, битый час уже воюю... Возникла проблема с позиционированием самого списка через text-align в родительском блоке. Установив всем блокам уже inline-block, что б уже наверняка... а все равно "мимо". Собственно, сам код 
https://jsfiddle.net/46at44tp/1/

Что я упустил? 

Изменено пользователем Super_Saimon

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

7 ответов на этот вопрос

Рекомендуемые сообщения

  • 0
56 minutes ago, Super_Saimon said:

Что я упустил? 

float: left и inline-block - не совместимы.

float автоматически делает элемент блочным.

И у вас ошибка, пропущена буква "e" в inline-block 

  • Thanks 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
Только что, sigma77 сказал:

float: left и inline-block - не совместимы.

float автоматически делает элемент блочным.

И у вас ошибка, пропущена буква "e" в inline-block 

Мда... как-то вообще из головы про совместимость вылетело. Спасибо за ответ! 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

В .carusel__item убираем

 float: left;

В .carusel__list убираем 

text-align:right

добавляем

 margin: 0 auto;

 

Изменено пользователем AlexZaw

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Спасибо за решение! Я втулил inline-block свойства, позабыв про несовместимость,  и сам себя запутал этим. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

 

В 31.10.2017 в 19:25, AlexZaw сказал:

В .carusel__item убираем


 float: left;

В .carusel__list убираем 


text-align:right

добавляем


 margin: 0 auto;

 

Я конечно дико извиняюсь))) Но чет я все равно не пойму в чем "корень зла" с центрированием именно li-шек. 

https://jsfiddle.net/yqfyb014/

Я пытаюсь добиться что-бы ul в родительском блоке был по центру, ну, и элементы списка тоже по центру блока ul. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
В том что у вас для лишек задан float:left. Отмените им обтекание,  задайте строчно-блочный тип, а для ul задайте text-align:center;
 
Выравнивание не работает для плавающих элементов
Изменено пользователем AlexZaw

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
26 минут назад, AlexZaw сказал:
В том что у вас для лишек задан float:left. Отмените им обтекание,  задайте строчно-блочный тип, а для ul задайте text-align:center;
 
Выравнивание не работает для плавающих элементов

Спасибо за ответ! Надеюсь, наконец-то запомню этот нюанс с позиционированием. Постоянно на таких тонкостях прогораю.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас


  • Похожие публикации

    • Автор: Андрей39
      Всем привет!
      Подскажите пожалуйста новичку, что за иконки на этом сайте. Пытаюсь скопировать её через исходный код, но выдает вот такой фрагмент кода:
      .fa-search:before { content: "\f002"; } Скриншот картинки, прикрепил. Буду рад, если Вы мне поможете. Спасибо!


    • Автор: Odinokiy_volk
      Сайт https://knyaz85.github.io/
      Сайт тестовый, для критики.. Идея - аналог страницы в соцсети в основном для размещения медиа-контента и документов
      Прошу оценить всё в целом - дизайн, верстку, код, юзабилити, общее впечатление и др.
      Примечания. Сайт делался под гугл хром, в мозилле другой медиаплеер и почему то по другому выглядит тень от белого фона - получается не очень красиво.. В эксплоурере вообще черт знает что получилось, прошу также хотя бы в общих чертах просвятить как адаптировать сайт к интернет эксплоурер..
      Медиа загружается через гугл очень долго, через мозиллу почему то быстрее.. Если кто знает почему, так же прошу просвятить)
    • Автор: Mixfixpix
      Всем привет, форумчане!
      Есть задача сделать вот такую штуку как на картинке, она должна быть 100% шириной по отношению к контенту, но ограниченной высотой, к примеру 60 пикселей.
      У меня уже есть решение которое я сделал https://jsfiddle.net/x5Lavn55/, но может имеется более элегантное и лучше чем мое?
      Пробовал с svg, но не могу растянуть на 100% не изменив высоту...