如何以 Bulma 方式垂直和水平居中某些内容?
How to vertically and horizontally center some content the Bulma way?
我想将内容水平和垂直居中,并且我想 "bulma way" 做到这一点(不添加额外的 CSS)。我的示例正在运行,但我觉得它是 "hacky".
Here is the best I have achieved
html,
body,
.container,
.section {
height: 100%;
}
.column {
flex-direction: column;
justify-content: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet" />
<section class="section">
<div class="container is-flex">
<div class="column is-flex has-text-centered">
<div class="box">
My content
</div>
</div>
</div>
</section>
编辑:我在 Bulma docs
中找到了使用 hero helper 的解决方案
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" />
<section class="hero is-fullheight">
<div class="hero-body has-text-centered">
<div class="container">
<div class="box">
My content
</div>
</div>
</div>
</section>
我想将内容水平和垂直居中,并且我想 "bulma way" 做到这一点(不添加额外的 CSS)。我的示例正在运行,但我觉得它是 "hacky".
Here is the best I have achieved
html,
body,
.container,
.section {
height: 100%;
}
.column {
flex-direction: column;
justify-content: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet" />
<section class="section">
<div class="container is-flex">
<div class="column is-flex has-text-centered">
<div class="box">
My content
</div>
</div>
</div>
</section>
编辑:我在 Bulma docs
中找到了使用 hero helper 的解决方案<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" />
<section class="hero is-fullheight">
<div class="hero-body has-text-centered">
<div class="container">
<div class="box">
My content
</div>
</div>
</div>
</section>