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

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

Вопрос задан 5 лет 3 месяца назад

Изменён 5 лет 3 месяца назад

Просмотрен 1k раз

Есть кнопка, которой задаю 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 — Как можно выровнять кнопки в этом меню в одну линию?

Вопрос задан 4 года 2 месяца назад

Изменён 4 года 2 месяца назад

Просмотрен 639 раз

Знаю, что куча ошибок в css. Но я только учусь.

* {
  transition: all .2s;
}

body {
  font: 1em sans-serif;
  padding-top: 0px;
  background: #ffffff;
}

li {
  list-style: none;
}

.nav {
  height: 100%;
  vertical-align: center;
}

.logo {
  width: 90px;
  height: 90px;
}

.header {
  width: 1200px;
  margin: 0 auto;
  height: 100px;
  float: left;
}

<div>
  <div>
    <img src="images/logotype.png" alt="Креативное агенство">
  </div>
  <div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
  <a href="#">Зв'язатися</a>
  <a href="#">Розповісти про проект<img src="images/arrow. png" alt="arrow" > </a>
</div>

• html
• css

Возможностей не мало…

Есть display:inline-block;, можно flex-ми, еще есть grid-ы

* {
  transition: all .2s;
}

body {
  font: 1em sans-serif;
  padding-top: 0px;
  background: #ffffff;
}
ul{
/*
или так 
display:flex;*/
}
li {
/**/
display:inline-block;

  list-style: none;
}

.nav {
  height: 100%;
  vertical-align: center;
}

.logo {
  width: 90px;
  height: 90px;
}

.header {
  width: 1200px;
  margin: 0 auto;
  height: 100px;
  float: left;
}

<div>
  <div>
    <img src="images/logotype.png" alt="Креативное агенство">
  </div>
  <div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
  <a href="#">Зв'язатися</a>
  <a href="#">Розповісти про проект<img src="images/arrow.
 
  png" alt="arrow" > </a>
</div>

display: inline-block; в css попробуй прописать классу butta или nav

0

сделать новый :

     <div  
    <button>
    ...
    </button>
    ..... </div>

в атрибуте style добавьте смещения и границы кнопок Пример смотри тут — http://drupalace.ru/vyravnivanie-knopok-po-tsentru

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

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

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

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

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

Почта

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

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

Почта

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

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

Как центрировать элемент кнопки с помощью HTML и CSS

Последнее обновление 15 августа 2022 г.

Давайте посмотрим, как можно центрировать кнопку по горизонтали и вертикали с помощью HTML и CSS , вам необходимо добавить определенные свойства CSS, которые поместят кнопку в центр вашей веб-страницы HTML.

Кнопка центрируется по горизонтали с text-align

Свойство text-align

используется для указания горизонтального выравнивания текста в блочном элементе.

Одна хитрость этого свойства заключается в том, что его также можно использовать для установки выравнивания дочерних элементов в родительском теге

.

Например, предположим, что у вас есть тег

, который содержит две кнопки. Вам нужно добавить text-align к тегу

следующим образом:

Нажмите на меня Нет, вместо этого нажмите на меня

 

  <голова>
    
  
  <тело>
    <кнопка>
      Нажми на меня
    
  

 

 .center-h {
  дисплей: гибкий; /* или отображение: сетка */
  выравнивание содержимого: по центру;
}
 

 .центр-в {
  дисплей: гибкий;
  выравнивание элементов: по центру;
}
 

 .h-500 {
  высота: 500;
}