<分区>
html - 如何使图像居中并位于 <h1> 标签的顶部
你好吗？我希望你在那里一切都好。伙计们，我被困在某个地方，我需要你的帮助。请浏览本文附带的 pic1 和 pic2。我希望 pic1 的输出看起来与 pic2 相似。
实际上我需要将 Logo 居中，它应该位于 h1 标签上方，例如检查 pic2。
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
/* Global Styles */
.container {
width: 80%;
margin: auto;
}
header {
background-color: #009866;
padding: 10px;
}
#branding {
float: left;
}
#branding h1 {
margin-left: 15px;
color:white;
}
.navbar {
list-style-type: none;
display: flex;
justify-content: flex-end;
}
.navbar li {
padding:6px;
}
.navbar li a {
text-decoration: none;
color: white;
}
#cent-logo h1 {
text-align: center;
}
#cent-logo img {
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="StyleSheets/style.css">
</head>
<body>
<header>
<section>
<div id="branding">
<h1>MJCET</h1>
</div>
<nav>
<ul class="navbar">
<li><a href="#">LOGIN</a></li>
<li><a href="#">SIGN UP</a></li>
</ul>
</nav>
</section>
</header>
<section>
<div class="container">
<div id="cent-logo">
<img src="Resources/logo.png">
<h1>Sign in to MJC316</h1>
</div>
</div>
</section>
</body>
</html>
最佳答案
你的 CSS 中有以下内容
img {
display: block;
margin-left: auto;
margin-right: auto;
}
看看https://www.w3schools.com/howto/howto_css_image_center.asp如果您有任何问题。
希望这对您有所帮助。
关于html - 如何使图像居中并位于 <h1> 标签的顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52577823/