AlexProf

Выравнивание элементов

Recommended Posts

Не получается разобраться, как работает свойство vertical-align. В таблицах работает, а для строчных элементов почему-то нет. Пытаюсь сделать вертикальное выравнивание, но текст не сдвигается

<div style="height: 200px"><span style="vertical-align: middle">Текст</span></div>

Как правильно устанавливать это свойство?

Share this post


Link to post
Share on other sites

vertical-align влияет на выравнивание относительно базовой линии. В вашем случае, если текст не на несколько строк, можно просто использовать line-height: 200px. Либо просто создать flex-контейнер и сделать выравнивание по центру. 2017 все-таки ;-).
C vertical-align прийдется создавать вспомогательный элемент на всю высоту, который будет тянуть базовую линию в центр, а вместе с ней и текст, который у вас в <span> лежит.

Share this post


Link to post
Share on other sites

line-height не подходит. Я размер блока для примера задал, а вообще просто хочу разобраться, как выравнивать содержимое блока. А flex- контейнер пока рано использовать, он в старых браузерах не работает. Придётся каждый раз отступами выравнивать. Или через таблицы. Я уж думал начать отказываться от них;)

Share this post


Link to post
Share on other sites
7 минут назад, AlexProf сказал:

line-height не подходит. Я размер блока для примера задал, а вообще просто хочу разобраться, как выравнивать содержимое блока. А flex- контейнер пока рано использовать, он в старых браузерах не работает. Придётся каждый раз отступами выравнивать. Или через таблицы. Я уж думал начать отказываться от них;)

если flex не работает в старых браузер стоит отказываться не от flexa а от старых браузеров,я в обще считаю если человек не знает других браузеров кроме старых ему еще рано в интернете находиться

Share this post


Link to post
Share on other sites
2 минуты назад, Евгений_SB сказал:

если flex не работает в старых браузер стоит отказываться не от flexa а от старых браузеров,я в обще считаю если человек не знает других браузеров кроме старых ему еще рано в интернете находиться

Как только смогу, заставлю пользователей отказаться от старых браузеров. А пока вынужден делать сайты под те браузеры, которыми пользуются люди

Share this post


Link to post
Share on other sites
13 минуты назад, AlexProf сказал:

Как только смогу, заставлю пользователей отказаться от старых браузеров. А пока вынужден делать сайты под те браузеры, которыми пользуются люди

все таки посмотрите в сторону flex-box на данный момент его поддерживают почти все браузеры http://caniuse.com/#feat=flexbox

Share this post


Link to post
Share on other sites
1 час назад, AlexProf сказал:

А пока вынужден делать сайты под те браузеры, которыми пользуются люди

Давно придумали костыли в виде .js библиотек, чтобы везде все поддерживалось. Один лишний HTTP-запрос роли не сыграет, зато геморроя станет куда меньше.

Share this post


Link to post
Share on other sites

Ну не знаю, я бы не решился флексы полифилить. 

В 04.08.2017 в 19:57, Евгений_SB сказал:

обще считаю если человек не знает других браузеров кроме старых ему еще рано в интернете находиться

Угу, а вам рано в вёб разработку с таким подходом.

Share this post


Link to post
Share on other sites
В 03.08.2017 в 23:25, AlexProf сказал:

Не получается разобраться, как работает свойство vertical-align. В таблицах работает, а для строчных элементов почему-то нет. Пытаюсь сделать вертикальное выравнивание, но текст не сдвигается


<div style="height: 200px"><span style="vertical-align: middle">Текст</span></div>

Как правильно устанавливать это свойство?

Начните вот с этой книги.

Share this post


Link to post
Share on other sites
В 4.8.2017 в 19:50, AlexProf сказал:

он в старых браузерах не работает

Нет больше таких браузеров, не выдумывайте :)

Хотя иногда и в сторону таблиц (CSSных, разумеется) посмотреть имеет смысл. В общем, действуйте гибко, без предрассудков!

Share this post


Link to post
Share on other sites

Время от времени я "развлекаю себя" походами на собеседования и могу вас заверить что многие компании ещё не отказались от IE10. Некоторые от IE9. А вот сбербанк до сих пор держит 8.

 Слууушайте, а может им скрин с реальной статистикой показать?  как считаете ?  

Share this post


Link to post
Share on other sites
7 часов назад, andrey7287 сказал:

Время от времени я "развлекаю себя" походами на собеседования и могу вас заверить что многие компании ещё не отказались от IE10. Некоторые от IE9. А вот сбербанк до сих пор держит 8.

 Слууушайте, а может им скрин с реальной статистикой показать?  как считаете ?  

покажите и статистику и новые браузеры))

Share this post


Link to post
Share on other sites
2 часа назад, Евгений_SB сказал:

покажите и статистику и новые браузеры))

Так у меня в резюме указанно - Семантичная, валидная верстка под google Chrome.

Скрины обязательно сделаю и буду носить с собой -)

 

Share this post


Link to post
Share on other sites

задай блоку display:table-cell и всё будет прекрасно выравниваться по центру (я обычно ещё делаю обёртку c width:100%; display:table; чтобы не было проблем с шириной, тут уже зависит от ситуации)

 

в твоём случае так будет работать:

<div style="width:100%; display:table;"><span style="height: 200px; display:table-cell; vertical-align: middle;">Текст</span></div>

Edited by wvvw

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Nerwoid
      Ребят всем привет! Я только начал изучать верстку по видео урокам на ютубе. У меня есть свой макет который я купил у дизайнера. Решил с него поучиться верстать. Подскажите как правильно сделать шапку сайта. У меня все выравнивания происходят с помощь отрицательных "margin".  Судя по урокам, везде делают это с помощью flex и тому подобное. Дизайн очень оказался сложным и там много проблем с фонами. Дайте пару советов и подсказок как продолжать дальше. Заранее спасибо ?
       
      Вот: макет:
      Мой сайт
       
    • By Raiz
      Добрый день!
      Может кто нибудь объяснить мне, не смышленому верстальщику-новичку, как мне выравнить текст по центру картинок?
      Я уже все перепробывал,но что то не клеится((
      на первом скрине я отразил суть проблемы, а на втором то, как это должно быть по макету!
      (я заменил одну картинку, т.к. это не особо важно, но сути это не меняет)
      в html я объединил это все (картинки\текст) в один див и дал ему класс.
      далее я дал класс всем текстовым материалам и ид для каждой картинки, дабы сделать более гибкую настройку, но все пошло не по плану.
       
      в CSS класс текста выглядит так:
      .contenttext {     display: inline-block;     font-family: 'Raleway', Arial, sans-serif;     margin-top: 60px;     font-weight: 500;     font-size: 130%; } Видимо задавать margin-top: 60px; вообще лишнее, по скольку вместе с текстом перемещаются и картинки. Парюсь уже битый час над этим.
      Если кто сможет, подскажите, что можно предпринять для разрешения проблемы.
       


    • By Nigelist
      Имеется конструкция типа:
      <p><img src="image.jpg"></p> Как можно с помощью CSS, указать выравнивание по середине?
  • Member Statistics

    46,335
    Total Members
    3,128
    Most Online
    Витольд Магикан
    Newest Member
    Витольд Магикан
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.