Блог

Главная - Вопросы по программированию - Как выровнять кнопку справа в текстовом контейнере?

Как выровнять кнопку справа в текстовом контейнере?

#css #flexbox #css-grid

#css #flexbox #css-сетка

Вопрос:

У меня есть контейнер, и в нем у меня есть три дочерних элемента: h2, p и button. Я хочу сделать кнопку справа от h2 и выровнять по центру. html не может быть изменен, только css с помощью flexbox или grid.

 div {
  background: rgba(0,0,0, .5);
  padding: 20px 40px;
  color: #fff;
}

div h2 {
  margin-bottom: 20px;
}
div p {
  margin: 0
}

div button {
  padding: 15px 20px;
} 
 <div>
  <h2>Test</h2>
  <p>Description test description</p>
  <button>submit</button>
</div>

введите описание изображения здесь

Комментарии:

1. Просто чтобы было ясно, вы хотите, чтобы h2 слева, p в центре и кнопка справа. Правильно?

2. В этом случае я бы использовал абсолютное позиционирование. Сетка Css кажется преувеличенной.

Ответ №1:

Вы можете использовать CSS Grid для изменения button положения:

 div {
  background: rgba(0,0,0, .5);
  padding: 20px 40px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

div h2 {
  margin-bottom: 20px;
}

div p {
  margin: 0
}

div button {
  padding: 15px 20px;
    grid-column: 2;
    grid-row: 1;
} 
 <div>
  <h2>Test</h2>
  <p>Description test description</p>
  <button>submit</button>
</div>
Метки: