Кнопка css по центру: Как выровнять кнопку по центру используя CSS и HTML

html — Как закрепить кнопку по центру снизу

Есть кнопка

color: #fff;
border-radius: 4px;
border: 1px solid #f6705a;
padding: 5px 20px;

Она находится в блоке

Нужно кнопку прижать к нижней части и по центру(Контент в блоке динамичный)

Добавляю в css

position: absolute;
bottom: 25px;
right: 0;
left: 0;
text-align: center;

Получаю вот это

.bl-i {
    height: 410px;
    color: #fff;
    background: #666666;
    margin-bottom: 15px;
}
.view-e {
    position: absolute;
    bottom: 25px;
    right: 0;
    left: 0;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    border: 1px solid #f6705a;
    padding: 5px 20px;
}

<div>
  <div>
    <img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-220x220.jpg">
    <h5>Пруток металлический</h5>
  </div>
  <ul>
    <li><span>Круг стальной</span></li>
  </ul>
  <div>
    <a href="">Показать еще</a>
  </div>
</div>

Что я делаю не правильно?

• html
• css

8

Если я все правильно понял, то у тебя должно быть что-то вроде этого. Но тут кончено нужно осторожно играться с размерами шрифта ul-li, чтобы они не вылазили за пределы.

.block {
  display: block;
  float: left;
  margin: 10px;
  position: relative;
  height: 410px;
  width: 255px;
  color: #fff;
  background: #666666;
}

.image img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}

.description ul {
  margin: 0;
}

.more {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 5px 0;
}

.more a {
  display: inline-block;
  color: #fff;
  border-radius: 4px;
  border: 1px solid #f6705a;
  padding: 5px 20px;
}

<div>

  <div>
    <div>
      <img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-220x220.jpg">
    </div>
    <div>
      <ul>
        <li>Первая строка</li>
        <li>Вторая строка</li>
        <li>Третья строка</li>
        <li>Четвертая строка</li>
        <li>Пятая строка</li>
      </ul>
    </div>
    <div>
      <a href="#">Показать еще</a>
    </div>
  </div>

  <div>
    <div>
      <img src="https://bipbap.  ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-220x220.jpg">
    </div>
    <div>
      <ul>
        <li>Первая строка</li>
        <li>Вторая строка</li>
        <li>Третья строка - очень длинная строка вы вмещающаяся в заданныую ширину</li>
      </ul>
    </div>
    <div>
      <a href="#">Показать еще</a>
    </div>
  </div>

  <div>
    <div>
      <img src="https://www.google.ru/doodle4google/images/splashes/featured.png">
    </div>
    <div>
      <ul>
        <li>Одна строка</li>
      </ul>
    </div>
    <div>
      <a href="#">Показать еще</a>
    </div>
  </div>

</div>

4

. bl-i {
    height: 410px;
    color: #fff;
    background: #666666;
    margin-bottom: 15px;
}
.view-e {
    position: absolute;
    bottom: 25px;
    left: 50%;
    margin-left: -67px;
    color: #fff;
    border-radius: 4px;
    border: 1px solid #f6705a;
    padding: 5px 20px;
}

<div>
  <div>
    <img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-220x220.jpg">
    <h5>Пруток металлический</h5>
  </div>
  <ul>
    <li><span>Круг стальной</span></li>
  </ul>
  <div>
    <a href="">Показать еще</a>
  </div>
</div>

Попробуйте так, если верно понял вопрос.

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Почему кнопка не центрируется по вертикали?

Есть кнопка, которой задаю css свойства:

vertical-align: middle; 
display: table-cell;

а родителю в свою очередь:

display: table; 
height: 114px;

но кнопка не выравнивается по вертикали — почему? Как исправить?

. button-wrapper {
  display: table;
  height: 114px;
  text-align: center;
  width: 100%;
}

.btn-theme-primary {
  background-color: #9A1E41;
  vertical-align: middle;
  display: table-cell;
  border: none;
  color: white;
  padding: 15px;
}

<div>
  <button>ДОБАВИТЬ</button>
</div>

• html
• css
• выравнивание

Нужно добавить еще один контейнер, к которому и нужно применить display:table-cell и vertical-align:middle;:

.button-wrapper {
  display: table;
  height: 114px;
  text-align: center;
  width: 100%;
}

.button-wrapper-inner {
  vertical-align: middle;
  display: table-cell;
}

.btn-theme-primary {
  background-color: #9A1E41;
  border: none;
  color: white;
  padding: 15px;
}

<div>
  <div>
    <button>ДОБАВИТЬ</button>
  </div>
</div>

А вообще, можно обойтись и без display:table:

. button-wrapper {
  height: 114px;
  line-height: 114px;
  text-align: center;
  width: 100%;
}

.btn-theme-primary {
  background-color: #9A1E41;
  border: none;
  color: white;
  padding: 15px;
  display: inline-block;
  vertical-align: middle;
}

<div>
  <button>ДОБАВИТЬ</button>
</div>

А можно вообще использовать flexbox, тогда можно и убрать vertical-align (это свойство для детей flex-контейнера игнорируется), и убрать display: table-cell (это свойство ничего не поменяет, так как дети flex-контейнера становятся неявно чем-то вроде inline-block). Демонстрация:

.button-wrapper {
  /* Делаем флекс-контейнером */
  display: flex;
  /* Выравниваем элементы по горизонтали */
  justify-content: center;
  /* Выравниваем элементы по вертикали */
  align-items: center;
  height: 114px;
  width: 100%;
}

.  btn-theme-primary {
  background-color: #9A1E41;
  border: none;
  color: white;
  padding: 15px;
}

<div>
  <button>ДОБАВИТЬ</button>
</div>

3

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

HTML/CSS: как центрировать новую кнопку CTA | by mark l chaves

HTML/CSS: как центрировать новую кнопку CTA | Марк Л Чавес | Medium

Чтение: 3 мин.

·

28 апреля 2019 г.

В этой статье показаны два способа центрирования пользовательской кнопки призыва к действию с помощью HTML и CSS.

Особая благодарность Айрин Данг за вопрос о том, как центрировать пользовательскую кнопку CTA в моей предыдущей статье. Хорошо, давайте приступим!

TL;DR

Прокрутите до конца, чтобы найти ссылка на полный исходный код , описанный в этой статье.

Это можно сделать несколькими способами. Я собираюсь рассмотреть два варианта.

1. Вариант 1: больше, интуитивно понятно и изящно. Вариант 1 использует тег DIV. Здесь задействовано больше кода, но ИМХО (по моему скромному мнению) он более интуитивно понятен и элегантен. Он также использует гибкий блок CSS (flexbox). Подробнее о флексбоксе читайте здесь.
2. Вариант 2: минималистский, загадочный, старый, но добрый. Минималист удобен, когда вы хотите уменьшить объем кода (меньший размер файла). Но сокращение кода может/сделает ваш код более трудным для чтения. Поэтому сложнее в обслуживании. Это проверенный и надежный метод. Таким образом, он может быть более надежным, чем вариант 1. Ах, компромиссы. Что ты можешь сделать?

Необработанный код для варианта 1 Размеченный код для варианта 1

Инструкции

Скопируйте и вставьте первый DIV перед кодом кнопки. Затем скопируйте/вставьте закрывающий DIV после кода кнопки. См. размеченный код выше.

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

В файле CSS мы будем использовать свойство « border » со значением « твердый 1.5px ”, где solid — тип, а 1.5px — ширина границы. Теперь назначьте подходящую высоту для div, используя « height » свойство типа « 7rem ». Свойство « display » будет использоваться со значением « flex », чтобы сделать определенную часть гибкой.

На следующем шаге мы выровняем кнопку по центру по горизонтали и вертикали, используя значение « center » для свойств « justify-content » и « align-items ».

CSS

div {

граница: сплошная 1,5 пикселя;

высота: 7бэр;

дисплей: гибкий;

выравнивание-содержание: по центру;

элементы выравнивания: по центру;

}

Сохраните код и запустите файл HTML в браузере:

Как видите, мы успешно центрировали кнопку внутри блока div, используя свойства CSS.

Способ 2: Центрировать кнопку внутри div Использование свойства CSS position

Свойство « position » используется для размещения элементов HTML в определенной позиции. Комбинация этого свойства с другими свойствами CSS помогает изящно достичь желаемых результатов.

Пример

В элементе div мы возьмем значение свойства « text-align » как « center », чтобы разместить кнопку горизонтально в центре. Для элемента кнопки указываем свойство « position » со значением « относительно »; это заставит элемент кнопки располагаться относительно своего стандартного положения. Далее мы установим для свойства « top » значение « 40% », чтобы выровнять кнопку по центру по вертикали.

CSS

div {

граница: сплошная 1,5 пикселя;

высота: 7бэр;

выравнивание текста: по центру;

}

кнопка {

положение: относительное;

верх: 40%;

}

Output

Мы объяснили самые простые способы центрирования кнопки внутри div с помощью CSS.