无法在响应式网站中垂直居中图像 [在 PC 和移动设备中]
Having trouble centering image vertically in responsive website [in both PC and mobile]
这是我在我的网站上看到的：
website
由于图片在导航栏下方，我希望它在我的响应式网站中垂直居中，类似于这个网站：https://www.ownhour.co.kr/#;
我在内部图像样式表中将宽度和高度添加为 100%，并在外部 CSS 中添加了边距和块。用手机版检查后，图片好像是坐在上面，下面有一个巨大的空隙。
这是我在我的网站上看到的：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="monday.css">
<title>J[a]son</title>
</head>
<body>
<nav>
<div class = "logo">
<h4>J[a]son</h4>
</div>
<ul class = "nav-links">
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">PHOTOGRAPHY</a>
<ul class="sub-menu">
<li><a href="photography_colour.html">Colour</a></li>
<li><a href="photography_black.html">Black</a></li>
</ul>
</li>
<li>
<a href="#">CODING</a>
</li>
<li>
<a href="#">ABOUT</a>
</li>
</ul>
<div class= "burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="testing.js"></script>
<img class="main_car" src="Photos/main_car.jpg" alt="car" width="100%" height="100%"/>
<!--<p>June, 2020. Sunshine Coast, BC, Canada </p>-->
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-between;
/*padding-right: 2em;*/
padding-left: 2em;
padding-top: 2em;
padding-bottom: 1.5em;
align-items: center;
min-height: 8vh;
background-color: black;
/*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(240, 235, 235);
font-size: 20px;
text-transform: uppercase;
letter-spacing: 5px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
letter-spacing: 1px;
font-weight: bold;
font-size: 11px;
/*padding: 5px 5px;*/
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width:1430px) {
.nav-links {
width: 40%;
}
}
@media screen and (max-width:950px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
padding-right: 2em;
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
padding-right: 1em;
}
.sub-menu {
position: relative;
}
}
.nav-active {
transform: translate(0%);
}
已更新
可以与代码一起使用
margin-left: -50px;
margin-right: -50px;
width:100px;
在
.main_car img {
position: absolute;
top: 50%;
left: 50%;
margin-left: [-50% of your image's width];
margin-top: [-50% of your image's height];
}
我是这样加的css
.main_car
{
position: relative;
}
.main_car img
{
position: absolute;
top: 50%;
left: 50%;
margin-left: [-50% of your image's width];
margin-top: [-50% of your image's height];
}
然后会得到这样的输出
图像居中
body {
background-color: black;
/*rgb(241, 233, 233);*/
}
* {
margin: 0px;
padding: 0px;
}
.main_car
{
position: relative;
}
.main_car img
{
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-right: -50px;
width:100px;
}
@media screen and (max-width:1430px) {
.nav-links {
width: 40%;
}
}
@media screen and (max-width:950px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
padding-right: 2em;
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
padding-right: 1em;
}
.sub-menu {
position: relaative;
}
}
<div class="main_car">
<img src="https://www.gravatar.com/avatar/efb780ba8c3560a06d4c1a1825b1e800?s=32&d=identicon&r=PG" alt="car">
</div>
问题是如何使汽车图像居中并保持响应。
据我了解（这可能需要根据您的具体情况进行调整）要求汽车图像填充 space 但在到达页脚之前不要在下方留下巨大的空隙。
为了在这种情况下做到这一点，我将 body 元素设置为 flex，这样一旦它决定了导航栏和页脚需要什么 space，它就可以填充剩余的 space跟车
我最初尝试用 object-fit: contain 和 object-position: center 在汽车 img 周围的包装器中执行此操作。但是，我无法完成这项工作，而是删除了汽车图像并将其设置为 div 的背景，并允许此 div 填充任何剩余的 space屏幕。
这是片段。
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
nav {
display: flex;
justify-content: space-between;
/*padding-right: 2em;*/
padding-left: 2em;
padding-top: 2em;
padding-bottom: 1.5em;
align-items: center;
min-height: 8vh;
background-color: black;
/*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(240, 235, 235);
font-size: 20px;
text-transform: uppercase;
letter-spacing: 5px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
letter-spacing: 1px;
font-weight: bold;
font-size: 11px;
/*padding: 5px 5px;*/
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width:1430px) {
.nav-links {
width: 40%;
}
}
@media screen and (max-width:950px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
padding-right: 2em;
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
padding-right: 1em;
}
.sub-menu {
position: relative;
}
}
.nav-active {
transform: translate(0%);https://ahweb.org.uk/car.png
}
.main_car_wrapper {
background-image: url(https://ahweb.org.uk/car.png);
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: contain;
width: 100%;
flex: 1 1 auto;
}
</style>
<nav>
<div class = "logo">
<h4>J[a]son</h4>
</div>
<ul class = "nav-links">
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">PHOTOGRAPHY</a>
<ul class="sub-menu">
<li><a href="photography_colour.html">Colour</a></li>
<li><a href="photography_black.html">Black</a></li>
</ul>
</li>
<li>
<a href="#">CODING</a>
</li>
<li>
<a href="#">ABOUT</a>
</li>
</ul>
<div class= "burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="testing.js"></script>
<div class="main_car_wrapper">
</div>
And some more footer stuff here
<p>June, 2020. Sunshine Coast, BC, Canada </p>
这是我在我的网站上看到的：
website
由于图片在导航栏下方，我希望它在我的响应式网站中垂直居中，类似于这个网站：https://www.ownhour.co.kr/#;
我在内部图像样式表中将宽度和高度添加为 100%，并在外部 CSS 中添加了边距和块。用手机版检查后，图片好像是坐在上面，下面有一个巨大的空隙。
这是我在我的网站上看到的：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="monday.css">
<title>J[a]son</title>
</head>
<body>
<nav>
<div class = "logo">
<h4>J[a]son</h4>
</div>
<ul class = "nav-links">
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">PHOTOGRAPHY</a>
<ul class="sub-menu">
<li><a href="photography_colour.html">Colour</a></li>
<li><a href="photography_black.html">Black</a></li>
</ul>
</li>
<li>
<a href="#">CODING</a>
</li>
<li>
<a href="#">ABOUT</a>
</li>
</ul>
<div class= "burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="testing.js"></script>
<img class="main_car" src="Photos/main_car.jpg" alt="car" width="100%" height="100%"/>
<!--<p>June, 2020. Sunshine Coast, BC, Canada </p>-->
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-between;
/*padding-right: 2em;*/
padding-left: 2em;
padding-top: 2em;
padding-bottom: 1.5em;
align-items: center;
min-height: 8vh;
background-color: black;
/*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(240, 235, 235);
font-size: 20px;
text-transform: uppercase;
letter-spacing: 5px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
letter-spacing: 1px;
font-weight: bold;
font-size: 11px;
/*padding: 5px 5px;*/
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width:1430px) {
.nav-links {
width: 40%;
}
}
@media screen and (max-width:950px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
padding-right: 2em;
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
padding-right: 1em;
}
.sub-menu {
position: relative;
}
}
.nav-active {
transform: translate(0%);
}
已更新
可以与代码一起使用margin-left: -50px;
margin-right: -50px;
width:100px;
在
.main_car img {
position: absolute;
top: 50%;
left: 50%;
margin-left: [-50% of your image's width];
margin-top: [-50% of your image's height];
}
我是这样加的css
.main_car
{
position: relative;
}
.main_car img
{
position: absolute;
top: 50%;
left: 50%;
margin-left: [-50% of your image's width];
margin-top: [-50% of your image's height];
}
然后会得到这样的输出
图像居中
body {
background-color: black;
/*rgb(241, 233, 233);*/
}
* {
margin: 0px;
padding: 0px;
}
.main_car
{
position: relative;
}
.main_car img
{
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-right: -50px;
width:100px;
}
@media screen and (max-width:1430px) {
.nav-links {
width: 40%;
}
}
@media screen and (max-width:950px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
padding-right: 2em;
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
padding-right: 1em;
}
.sub-menu {
position: relaative;
}
}
<div class="main_car">
<img src="https://www.gravatar.com/avatar/efb780ba8c3560a06d4c1a1825b1e800?s=32&d=identicon&r=PG" alt="car">
</div>
问题是如何使汽车图像居中并保持响应。
据我了解（这可能需要根据您的具体情况进行调整）要求汽车图像填充 space 但在到达页脚之前不要在下方留下巨大的空隙。
为了在这种情况下做到这一点，我将 body 元素设置为 flex，这样一旦它决定了导航栏和页脚需要什么 space，它就可以填充剩余的 space跟车
我最初尝试用 object-fit: contain 和 object-position: center 在汽车 img 周围的包装器中执行此操作。但是，我无法完成这项工作，而是删除了汽车图像并将其设置为 div 的背景，并允许此 div 填充任何剩余的 space屏幕。
这是片段。
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
nav {
display: flex;
justify-content: space-between;
/*padding-right: 2em;*/
padding-left: 2em;
padding-top: 2em;
padding-bottom: 1.5em;
align-items: center;
min-height: 8vh;
background-color: black;
/*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(240, 235, 235);
font-size: 20px;
text-transform: uppercase;
letter-spacing: 5px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
letter-spacing: 1px;
font-weight: bold;
font-size: 11px;
/*padding: 5px 5px;*/
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width:1430px) {
.nav-links {
width: 40%;
}
}
@media screen and (max-width:950px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
padding-right: 2em;
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
padding-right: 1em;
}
.sub-menu {
position: relative;
}
}
.nav-active {
transform: translate(0%);https://ahweb.org.uk/car.png
}
.main_car_wrapper {
background-image: url(https://ahweb.org.uk/car.png);
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: contain;
width: 100%;
flex: 1 1 auto;
}
</style>
<nav>
<div class = "logo">
<h4>J[a]son</h4>
</div>
<ul class = "nav-links">
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">PHOTOGRAPHY</a>
<ul class="sub-menu">
<li><a href="photography_colour.html">Colour</a></li>
<li><a href="photography_black.html">Black</a></li>
</ul>
</li>
<li>
<a href="#">CODING</a>
</li>
<li>
<a href="#">ABOUT</a>
</li>
</ul>
<div class= "burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="testing.js"></script>
<div class="main_car_wrapper">
</div>
And some more footer stuff here
<p>June, 2020. Sunshine Coast, BC, Canada </p>