<分区>
<分区>
我试图将我的文本移动到图像上标题的中间，但是一旦我移动它，整个标题就会随之而来。有人可以帮我解决这个问题吗？如您所见，我正在尝试使用 margin-top 来实现它，但是当我实现它时，标题随之而来。我已经关闭了所有影响图像的 div。
html, body {
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
body {
font-family: 'Josefin Sans', sans-serif;
text-align: center;
}
header {
width: 100%;
height: 400px;
background: url(/assets/image/tjanst.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 10;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
padding: 16px 40px;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
}
.move-down h3{
margin-top: 200px;
max-width: 400px;
}
nav ul li a {
font-family: 'Josefin Sans', sans-serif;
font-size: 14px;
color: #fff;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
}
a {
color: #fff;
text-decoration: none;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
@media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 20px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
} <header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo wow tada">
</div>
<div class="menu">
<ul>
<li><a href="Start.html">START</a></li>
<li><a href="Tjanster.html">TJÄNSTER</a></li>
<li><a href="omoss.html">OM OSS</a></li>
<li><a href="kontakt.html">KONTAKT</a></li>
</ul>
</div>
</nav>
<div class="move-down wow fadeInUp"><h3> VILL GÖRA KUNDEN NÖJD</h3>
<h3> tel: 070719763 </h3></div>
</header>最佳答案
我们删除 '.move-down h3' 中的 'margin-top: 200px;' 并添加 'padding: 200px 0px 0px 0px;' 或 'padding-top: 200px;'
关于html - 文本卡在标题上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54105274/
