gpt4 book ai didi

html - 如何使用 Bootstrap 在英雄图像中制作文本中心

转载 作者:太空宇宙 更新时间:2023-11-04 13:08:30 24 4
gpt4 key购买 nike

我正在尝试使用 Bootstrap 对以下设计进行建模。

enter image description here

目前我找到了一种方法,可以使用 bootstrap CSS 中的“carousel-caption”类来执行此操作,但它似乎没有按预期工作。

html 看起来像这样:

  <div class="container-fluid">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1000x550" alt="test" class="img-responsive">
<div class="carousel-caption">
<h1>Text word1 word2 superlative.</h1>
</div>
</div>
</div>
</div>

您可以在 https://jsfiddle.net/3vf5gog4/2/ 上查看示例

这会产生一个标题,但图像不会拉伸(stretch)并且标题不会垂直居中,我无法弄清楚如何在当前轮播标题下方添加另一个标题

最佳答案

这是 Bootstrap 可能会绊倒您的事情之一。所以 .container-fluid 类周围有一个填充,其他网格元素也是如此,这导致了拉伸(stretch)问题。 CSS 中垂直居中的元素可能会很痛苦 one good method我已经看到了,但我通常只关注百分比并添加一些百分比

我已经编辑了您的 fiddle 以删除 Bootstrap 填充并将该文本居中。 https://jsfiddle.net/3vf5gog4/5/

关于html - 如何使用 Bootstrap 在英雄图像中制作文本中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36776924/

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