Here is what I see for my website:
As the image is below Navigation Bar, I want this to center vertically in my responsive website, similar to this website: https://www.ownhour.co.kr/#;
I have added width and height as 100% in internal image stylesheet and added margin and block in external CSS. After inspecting with the mobile version, it seems like the image is sitting at the top with a huge gap at the bottom.
Here is what I see for my website:
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%);
}
.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];
}
in
.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];
}
I'm added css like this
.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]; }
Then will get output like this
Centered Image
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>
The question is how to center the car image and remain responsive.
As I understand it (and this may need adjustment for your particular case) the requirement is for the car image to fill space but not leave a huge gap underneath before the footers are reached.
To do this in this case I've set the body element to flex so that once it's decided what is needed space-wise for the navbar and footer it can fill the remaining space with the car.
I initially tried to do this with object-fit: contain
and object-position: center
within a wrapper around the car img. However, I could not make this work and instead I've removed the car image and set it as a background to a div instead and allowed this div to fill up any remaining space on the screen.
Here's the snippet.
* { 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.