• 0
Super_Saimon

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

Вопрос

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

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

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

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


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

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

  • 0
56 minutes ago, Super_Saimon said:

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

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

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

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

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


Ссылка на сообщение
Поделиться на других сайтах
  • 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;
 
Выравнивание не работает для плавающих элементов

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

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


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

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

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

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

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

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

Войти

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

Войти сейчас

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

    • Автор: mejta
      Приписал  body{
      background-image: url(img/fon.png)
      }
       Сразу фон есть ,  а после обновления изчезает.
      И так с любой картинкой
      Подробней в скриншотах
       
    • Автор: WebNewbe
      Здравствуйте. Я занимаюсь версткой сайтов: лендингов, интернет-магазинов, флаеров и тп. Ищу работу, для набора опыта и заработка первых денег на данной позиции.

       Мое портфолио:
      https://alex2033.github.io/sites/BlackDone/index.html
      https://alex2033.github.io/sites/Sandeo/index.html
      https://alex2033.github.io/sites/Barbershop/index.html
      https://alex2033.github.io/sites/Skylith/index.html
      https://alex2033.github.io/sites/Unicorn/index.html
      https://alex2033.github.io/sites/Bouncy/index.html
      Остальные работы вы можете посмотреть здесь:
      https://alex2033.github.io/
      Навыки:
      - Знание HTML5, CSS3
      - Опыт адаптивной, семантической, кроссбраузерной верстки
      - CSS3 анимация
      - знания Javascript на уровне jQuery
      - Использование препроцессоров LESS/SASS/Stylus + Pug
      - Опыт работы в Adobe Photoshop, Illustrator, Zeplin, Avocode
      - Именование классов по методологии БЭМ-нейминг
      - Gulp, npm, bower
      - Умение работать с сетками (bootstrap 3+, foundation, flexboxgrid)
      - Умение работать с фреймворками bootstrap 3, 4, foundation
      - Знание английского на уровне чтения документации
      - Навык работы с векторной графикой SVG
      - Умение использовать flexbox, css-grid там где это необходимо
      Форма связи:
      Email - XoxlofAlexandr@yandex.ru - преимущественно
      Skype - Xronaliz
      Также можете написать на этом сайте
      Благодарю за внимание и хорошего дня:)
    • Автор: WebNewbe
      Здравствуйте. Я занимаюсь версткой сайтов: лендингов, интернет-магазинов, флаеров и тп. Ищу работу, для набора опыта и заработка первых денег на данной позиции.

       Мое портфолио:
      https://alex2033.github.io/sites/BlackDone/index.html
      https://alex2033.github.io/sites/Sandeo/index.html
      https://alex2033.github.io/sites/Barbershop/index.html
      https://alex2033.github.io/sites/Skylith/index.html
      https://alex2033.github.io/sites/Unicorn/index.html
      https://alex2033.github.io/sites/Bouncy/index.html
      Остальные работы вы можете посмотреть здесь:
      https://alex2033.github.io/
      Навыки:
      - Знание HTML5, CSS3
      - Опыт адаптивной, семантической, кроссбраузерной верстки
      - CSS3 анимация
      - знания Javascript на уровне jQuery
      - Использование препроцессоров LESS/SASS/Stylus + Pug
      - Опыт работы в Adobe Photoshop, Illustrator, Zeplin, Avocode
      - Именование классов по методологии БЭМ-нейминг
      - Gulp, npm, bower
      - Умение работать с сетками (bootstrap 3+, foundation, flexboxgrid)
      - Умение работать с фреймворками bootstrap 3, 4, foundation
      - Знание английского на уровне чтения документации
      - Навык работы с векторной графикой SVG
      - Умение использовать flexbox, css-grid там где это необходимо
      Форма связи:
      Email - XoxlofAlexandr@yandex.ru - преимущественно
      Skype - Xronaliz
      Также можете написать на этом сайте
      Благодарю за внимание и хорошего дня:)

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы