gpt4 book ai didi

css - 如何以 Bulma 方式垂直和水平居中某些内容?

转载 作者:行者123 更新时间:2023-11-28 19:19:44 27 4
gpt4 key购买 nike

我想将内容水平和垂直居中,并且我想以“bulma 方式”来实现(不添加额外的 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 中找到了使用英雄助手的解决方案

<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>

关于css - 如何以 Bulma 方式垂直和水平居中某些内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57589859/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com