1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Помогите] Вертикальное выравнивание в блоке

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем AlexGood, 26 дек 2016.

  1. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Есть простой блок с текстом:

    HTML:
    <div class="ab-price">
            <div>30,00<br/> (300 000) руб.</div>
     </div>

    При задании стиля: .ab-price div{ vertical-align: middle;}

    Никаких изменений. Текст в блоке не выравнивается по вертикале :( Где туплю?
     
  2. shede

    shede

    Регистрация:
    11 авг 2016
    Сообщения:
    84
    Симпатии:
    46
    vertical-align применяется только к строчным элементам inline или строчным блокам inline-block.
     
    Perat и AlexGood нравится это.
  3. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    115
    Симпатии:
    26
    line-height в помощь
     
    AlexGood нравится это.
  4. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    line-height не прокатывает в таком случае: http://joxi.ru/LmGDxXXIeel862
    Получается в левом блоке больше инфы, а в правом меньше, если задать большой line-height то некрасиво будет
    Проблема в том, что мне надо чтобы все тянулось, т.к. прайс под мобилу будет, поэтому и надо вертикальное выравнивание
     
  5. shede

    shede

    Регистрация:
    11 авг 2016
    Сообщения:
    84
    Симпатии:
    46
    Задайте родителькому блоку позишн релатив, а дочернему absolute: top 50%; margin: минус половина от высоты дочернего блока в пикс;
     
    AlexGood нравится это.
  6. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Спасибо. Не в идеале конечно, но ближе к правде. Буду тестировать как будет вести себя при адаптации.
     
  7. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    115
    Симпатии:
    26
  8. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    но тут получается с фиксированной высотой блока будет, т.е. если где-то текста будет больше то придется подстраиваться
     
  9. shede

    shede

    Регистрация:
    11 авг 2016
    Сообщения:
    84
    Симпатии:
    46
    http://jsfiddle.net/8kotv6yb/1/ ну вот без фикс высоты, можно любую задать, блок будет посередине
     
  10. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    так все равно ведь .ab-price {height:200px;} и уже относительно его 200px идет .ab-price2 {top:50%;}
     
  11. shede

    shede

    Регистрация:
    11 авг 2016
    Сообщения:
    84
    Симпатии:
    46
    высоту можно в процентах задать, либо max-height, блок останется в центре
     
    Perat и AlexGood нравится это.
  12. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    115
    Симпатии:
    26
  13. shede

    shede

    Регистрация:
    11 авг 2016
    Сообщения:
    84
    Симпатии:
    46
    и так тоже можно) но мне больше нравится с приминением позишн, так как иногда в блоке может быть, например картинка, чтобы вывести текст поверх нее, без лишних заморочек.
     
    Perat и AlexGood нравится это.
  14. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Я так когда делаю у меня рассыпается тогда прайс в выпадающем списке. Посмотрите может кто поймет в чем у меня затупа https://jsfiddle.net/AlexGood2016/qjqpzs0w/

    по этой ссылке вроде можно редачить код https://jsfiddle.net/AlexGood2016/qjqpzs0w/#&togetherjs=N3E0l2R43N

    Там по нажатию на плашку черную, вываливается прайс в котором все содержимое
     
  15. settr

    settr

    Регистрация:
    12 окт 2016
    Сообщения:
    67
    Симпатии:
    54
    AlexGood нравится это.
  16. incomesystem

    incomesystem

    Регистрация:
    17 апр 2013
    Сообщения:
    1
    Симпатии:
    0
    Надо попробовать с помощью flexbox сверстать.
     
  17. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    115
    Симпатии:
    26
    как вариант с применением селектора . высота меняется под самый высокий блок http://jsfiddle.net/c1bgfffq/963/
     
    AlexGood нравится это.
  18. arturito

    arturito

    Регистрация:
    5 июн 2015
    Сообщения:
    4
    Симпатии:
    0
    display: table-cell;
    vertical-align: middle

    эти 2 строки css и есть решение вашей проблеми