我有这段代码，但我无法将图像置于标题上方的中心位置。 我尝试了 allign/center 等，但图像只停留在网页的左侧。我想把它放在标题上方的中心，所以如果你们能帮助我，我需要有关这个 ç-ç 的帮助。
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<title>Teste!</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Lobster;
}
.background-wrap {
position: fixed;
z-index: -1000;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0,0,0,0.6);
}
.content h1 {
text-align: center;
font-size: 65px;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 20px;
letter-spacing: 3px;
color: #aaa;
}
.circular {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://data.whicdn.com/images/246284024/large.jpg) no-repeat;
}
</style>
</head>
<body>
<script> alert("Teste site")</script>
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop">
<source src="vid/kappa.mp4" type="video/mp4">
Video not supported
</video>
</div>
<div class="content">
<img src="">
<h1>Só queria por uma imagem em cima dessa linha.</h1>
<p>Teste teste teste</p>
</div>
<div class="circular">
</div>
</body>
</html>`enter code here`
最佳答案
我假设你的意思是 <img/>在以下代码中标记:
<div class="content">
<img src="">
<h1>Só queria por uma imagem em cima dessa linha.</h1>
<p>Teste teste teste</p>
</div>
如果是这样，你必须给你的图像宽度，然后把它的边距设置为自动:
.content img {
width: 200px; // This value is for test;
margin: 0 auto;
}
关于html - 我必须做些什么才能将一张图片放在这段代码的标题上方？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44865356/