css 使用引导程序HTML将项垂直和水平居中[duplicate]

vbopmzt1 于 2022-12-01 发布在其他

关注(0)|答案(1)|浏览(145)

此问题在此处已有答案：

Vertical Align Center in Bootstrap 4 [duplicate]（19个答案）
3天前关闭。
我正在尝试创建一个中间有一个按钮，下面有文字的网页。我尝试使用bootstrap来实现这一点，但是目前按钮下面的文字要么太低，要么在不同设备上按钮下面的文字间距不一致。下面是我正在使用的代码：

<div class="container-fluid" style="height: 75vh;">
        <div class="h-100 d-flex justify-content-center align-items-center">
            <div class="grid">
                <div class="row">
                    <button type="button" class="btn btn-primary btn-xlarge btn-success"
                            id="button1">
                        Button!
                    </button>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-center" style="margin-top: -28%">
            <div class="grid">
                <div class="row" style="font-size: 24px">
                    <p id="p1">Lorem Ipsum</p>
                </div>
            </div>
        </div>
    </div>

有人对如何解决这个问题有什么建议吗？
我正在使用HTML5和Bootstrap 4

css

来源：https://stackoverflow.com/questions/74587574/vertically-and-horizontally-centering-items-using-bootstrap-html

1条答案

按热度按时间

sirbozc51#

使用简单布局，即在flex容器中同时使用button和div。并添加flex-direction列。

<div class="container-fluid" style="height: 75vh;">
  <div class="h-100 d-flex justify-content-center align-items-center flex-column">
    <button type="button" class="btn btn-primary btn-xlarge btn-success"
              id="button1">
        Button!
    </button>
    <div style="font-size: 24px">
        <p id="p1">Lorem Ipsum</p>
     </div>
  </div>
</div>

赞(0）回复(0）举报 2022-12-01

我来回答

css 使用引导程序HTML将项垂直和水平居中[duplicate]

1条答案

相关问题

热门标签

最新问答