Начальная загрузка 4 центра заголовка и кнопки выравнивания вправо все в один ряд

Question

Я использую Bootstrap 4 с React. Я пытаюсь центрировать h4 и выровнять пару кнопок в одном ряду. Я мог бы сделать это, но текст h4 не центрирован по всей ширине. Он центрируется только на том пространстве, которое осталось после размещения кнопок.

Я бы хотел центрировать элемент h4 по всей ширине, поместив кнопки вправо в один ряд.

Могу ли я узнать, как этого добиться?

<div>
  <div className="float-right">
    <EditButton /> <DeleteButton />
  </div>
  <h4 style={{ textAlign: "center" }}>Application Name</h4>
</div>

Answer 1

Я понимаю, что вы хотите что-то похожее на это, вам сначала нужно установить для свойства display: inline значение h4, чтобы кнопки (по умолчанию встроенные) следовали за заголовком, а затем text-center класс сосредоточит все; но я думаю, что вы также хотите, чтобы сам заголовок был в центре экрана, а кнопки справа от него, верно?

.buttons {
  top: 0px;
  right: 0px;
}

h4{
  right: 50%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<h4 class="text-center">H4 Title</h4>

<div class="text-center">
  <h4 class="d-inline">H4 Title</h4>
  <button class="btn btn-primary">Button</button>
  <button class="btn btn-primary">Button</button>
  <button class="btn btn-primary">Button</button>
</div>


<div class="text-center mt-5 position-relative">
  <h4 class="w-100 text-center">
    H4 Title
  </h4>
  <div class="position-absolute buttons">
      <button class="btn btn-primary">Button</button>
      <button class="btn btn-primary">Button</button>
      <button class="btn btn-primary">Button</button>
    </div>
</div>

Answer 2

Вы можете центрировать текст, используя класс text-center и правую кнопку выравнивания, используя класс text-right

, где container-fluid - для полной ширины, а m-0 p-0 - margin: 0; & padding: 0 для удаления углового пространства.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container-fluid p-0 m-0">
  <div class="text-center">
    <h4 class="d-inline">i am H4</h4>
    <button class="d-inline float-right btn btn-info">Demo</button>
  </div>
</div>