无论我尝试什么，我的图像都不会与顶部的标题对齐。如果有人能为我提供代码更正，我们将不胜感激。提前致谢。
img {
position: absolute;
top: 50%;
left: 50%;
width: 675px;
height: 418px;
margin-top: -250px;
/* Half the height */
margin-left: -250px;
/* Half the width */
}
body {
background-color: black;
}
h1 {
color: white;
text-align: center;
}
p {
color: white;
font-family: verdana;
font-size: 20px;
}<h1>Text</h1>
<div class="img">
<img src="rsz_damon600.png">
</div>你应该将margin-top和margin-left设置为宽度和高度的一半。
或者如果你不知道元素的大小，你可以使用
transform：translate（-50％， - 50％）;
使其垂直和水平居中
img {
position: absolute;
top: 50%;
left: 50%;
/* width: 675px;
height: 418px; */
transform: translate(-50%, -50%);
}
另一种方法：
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
这是一个guide
尝试：
<!DOCTYPE html>
<html>
<head>
<title>HTML Reference</title>
<style>
img {
display: block;
margin: 0 auto;
}
body {
background-color: black;
}
h1 {
color: white;
text-align: center;
}
p {
color : white;
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Text</h1>
<div class="img">
<img src="rsz_damon600.png">
</div>
</body>
</html>
使用css技巧transform: translate(-50%, -50%)：
img {
position: absolute;
top: 50%;
left: 50%;
width: 675px;
height: 418px;
transform: translate(-50%, -50%);
}
body {
background-color: black;
}
h1 {
color: white;
text-align: center;
}
p {
color : white;
font-family: verdana;
font-size: 20px;
}<style>
</style>
<body>
<h1>Text</h1>
<div class="img">
<img src="http://www.motorverso.com/wp-content/uploads/2015/01/iNFINITI-q60-1_1280x792-675x418.jpg">
</div>
</body>你可以像这样简单地做。将图像放在div元素中。然后将div的margin设置为auto。 :)
<div name="my_div"style="margin:auto;">
<img src="" id="" />
</div>
尝试将left:50%更改为left:43%。这应该可以让你到达你想去的地方。