堆棧內存溢出
  簡體   English   中英

無法在響應式網站中垂直居中圖像 [在 PC 和移動設備上]

[英]Having trouble centering image vertically in responsive website [in both PC and mobile]

 原文  2020-12-01 11:41:54  4   2    html/ css/ alignment/ center

問題描述

這是我在我的網站上看到的：

網站

由於圖片在導航欄下方，我希望它在我的響應式網站中垂直居中，類似於這個網站： 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%);
}

2 個解決方案

解決方案1
 0  2020-12-01 11:58:29

更新

可以與代碼一起使用 
.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];
}

在

.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];
}

我是這樣加的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]; }

然后會這樣得到output
居中圖像

 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>

解決方案2
 0 已采納  2020-12-01 13:18:49

問題是如何使汽車圖像居中並保持響應。

據我了解（這可能需要針對您的特定情況進行調整）要求汽車圖像填充空間但在到達頁腳之前不要在下方留下巨大的間隙。

為此，在本例中，我將 body 元素設置為 flex，這樣一旦確定導航欄和頁腳在空間方面需要什么，它就可以用汽車填充剩余空間。

我最初嘗試使用object-fit: contain和object-position: center在汽車 img 周圍的包裝器中執行此操作。 但是，我無法完成這項工作，而是刪除了汽車圖像並將其設置為 div 的背景，並允許此 div 填充屏幕上的所有剩余空間。

這是片段。 

 * { 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 垂直居中放置元素時遇到麻煩 集中圖像以響應式網站 難以在網站上集中元素 在CSS中將圖片居中時遇到問題 水平/垂直跨瀏覽器居中圖像 將圖像在Bootstrap滑塊中水平和垂直居中 居中圖像在水平和垂直方向上都充當“彈出窗口” 在響應父節點上始終水平和垂直居中div 將h1元素和輸入元素垂直居中時遇到麻煩 Flexbox無法在移動設備上垂直居中
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM