Центральные кнопки внутри столбца - PullRequest
Новая
       16

Центральные кнопки внутри столбца

0 голосов
/ 19 апреля 2020

Я использую Bulma. Рассмотрим следующее HTML

<div class="container">
  <div class="columns">
    <div class="column has-text-centered">
      <h1 class="title">
        Welcome! :)
      </h1>
      <div class="buttons">
        <a href="/login" class="button">Login now!</a>
        <a href="/register" class="button">Register now!</a>
      </div>
    </div>
  </div>
</div>

Теперь заголовок центрируется, а кнопки - нет. Конечно, если мы установим display: block; в div, который группирует кнопки, они также будут отцентрированы. Но я не смог найти ни одного примера, и я не уверен, что здесь есть способ go.

Есть ли более «булмоподобный» способ решения этой проблемы?

Ответы [ 2 ]

2 голосов
/ 19 апреля 2020

Я не уверен в этом.
Я пытался воспроизвести проблему, но кажется, что кнопки расположены по центру. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" rel="stylesheet"/>
<div class="container">
  <div class="columns">
    <div class="column has-text-centered">
      <h1 class="title">
        Welcome! :)
      </h1>
      <div class="buttons">
        <a href="/login" class="button">Login now!</a>
        <a href="/register" class="button">Register now!</a>
      </div>
    </div>
  </div>
</div>

Может быть есть другие правила, которые отменяют это поведение?

РЕДАКТИРОВАТЬ:

Кажется, что в той же версии между 0.4.0 и 0.8.0 они используют макет flex box.

В примере, которым вы поделились, класс buttons имеет display: flex-box, но ему не хватает свойства justify-content: center; для центрирования содержимого этого div.
Я не знаю, является ли это ожидаемым поведением или ошибкой.

Вот рабочий пример: https://jsfiddle.net/gix_lg/73vmofqa/1/

1 голос
/ 19 апреля 2020

Вы пробовали "is-vcentered" вместо "has-text-centtered"? Кроме того, вы можете использовать пустые столбцы, используя div с class = "column", чтобы создать горизонтальное пространство вокруг элементов .column, или использовать .is-centrated на родительском элементе .columns

Вы пытались проверить свою страницу, чтобы увидеть css?

...