Как прижать кнопку к низу блока CSS?

Форум арбитражников и вебмастеров Источники трафика SEO Как прижать кнопку к низу блока CSS?

  • 24 августа, 2021 в 6:32 дп

    Нужна помощь верстальщика. Устанавливаю счетчик Яндекс Метрики, а футер не получается стащить вниз. Короче, вопрос в том, как прижать кнопку к низу блока методами CSS или HTML?

    24 августа, 2021 в 6:33 дп

    На WordPress сайт? Видимо, тема — бесплатная и г… Установи нормальный платный шаблон и все будет в шоколаде.

    24 августа, 2021 в 6:34 дп

    В CSS рекомендую использовать поля и отступы от содержимого до краев блока.

    Типа:

    <center></center>

    <div align=»center»></div>

    <div style=»text-align:center»></div>

    24 августа, 2021 в 6:39 дп

    Я использую такой код CSS:

    Вложения:
    24 августа, 2021 в 7:07 дп

    Попробуй обернуть кнопку в контейнер flex — элемент, которому задано свойство display со значением flex. И пропиши justify-content по центру. Футер в этом случае будет постоянно внизу при расширении или уменьшении родителя, а кнопка располагаться по центру. Если же хочешь, чтобы подвал не заезжал на кнопку, используй padding-bottom.

    24 августа, 2021 в 7:09 дп

    Простой вариант с position: absolute не подходит, так как блок растягивается и кнопка смотрится некрасиво.

    24 августа, 2021 в 7:13 дп

    Ну вам же написали — вы скорее всего не задали высоту блока 100%, а также надо прописать в display: flex, а в justify-content: center. Пример CSS во вложении.

    Вложения:
    24 августа, 2021 в 7:35 дп

    Я бы предложил более простой способ абсолютного позиционирования. В этом случае родительский элемент должен обязательно иметь относительную позицию relative. Результат будет как в скрине ниже.

    Преимущество данного метода — простота выполнения. Однако при таком варианте вы не сумеете поставить рядом другую кнопку (счетчик). Тут не исключено смещение других элементов. Например, они лягут друг на друга и поломать верстку. Поэтому пользуемся этим способом только, если используется всего одна кнопка.

    Вложения:
    24 августа, 2021 в 7:59 дп

    Ничего лучше flexbox – макета CSS-3, не знаю. Вешать на <p абсолютное позиционирование не советовал бы. Родителю в этом случае нужно задавать нижний паддинг значением высоты параграфа, иначе все схлопнется. А это сделать уже не так просто. К примеру, можете сделать вот так.

    Вложения:
    24 августа, 2021 в 8:07 дп

    Так по классике верстки рекомендуется в display использовать inline-block. Такие элементы обладают характеристиками как блочных, так и строчных элементов. Другими словами, можно выбирать, как именно располагать – вертикально или горизонтально.

    Например таким способом

    Вложения:
    24 августа, 2021 в 8:14 дп

    Делать через inline-block — плохая идея. Это просто свойство для выравнивания, а никак не для компоновки блока. В таких сетках используется свойство float (left/right). Большинство html-фреймвоков их как раз и применяют, так как этот код хорошо поддерживается старыми браузерами. Однако от существенных недостатков никуда не деться:

    • Отсутствует высота, поэтому трудно выровнять элементы по вертикали;
    • Элементы будут цепляться друг за друга, если не знать, сколько их точно будет в ряду.