堆栈内存溢出
  繁体   English   中英

无法在响应式网站中垂直居中图像 [在 PC 和移动设备上]

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

 原文  2020-12-01 11:41:54  3   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