gpt4 book ai didi

html - 如何使用vh垂直对齐?

转载 作者:行者123 更新时间:2023-11-28 07:02:28 25 4
gpt4 key购买 nike

我想在使用 vh 单位的最小高度的 div 中垂直对齐 h1。这是 html 和 css:
HTML

 <section class="imgdestaque">
<h1>Abraçar o <span>Ar Puro</span></h1>
</section>

CSS

.imgdestaque{
width:100%;
min-height:75vh;
background: url(../img/destaque2.jpg) no-repeat left bottom fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-top:50px;}

.imgdestaque h1{
color: white;
font-family: 'museosans900';
font-size:5em;
padding-top:15%;
text-align: center;
text-transform: uppercase;}

当您在移动设备上看到它或降低浏览器的高度时,它真的很不好看。任何解决方案?谢谢

最佳答案

您有几个选择,下面的示例就是其中之一。

.imgdestaque {
width: 100%;
min-height: 75vh;
background: url(../img/destaque2.jpg) no-repeat left bottom fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-top: 50px;
}
.imgdestaque h1 {
color: red;
font-family: 'museosans900';
font-size: 5em;
text-align: center;
text-transform: uppercase;
}
/* This centers your h1 tag vertically */

.imgdestaque {
position: relative;
}
.imgdestaque h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<section class="imgdestaque">
<h1>Abraçar o <span>Ar Puro</span></h1>
</section>

关于html - 如何使用vh垂直对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33159679/

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