Question

抱歉，我知道有类似的问题，但我仍然无法解决。我希望身体中的图像居中，但只有当纵横比意味着右侧有空白区域时，我才尝试使用margin：0 auto但无效。

这是我的HTML：

    <!DOCTYPE html>
  <html>
 <head>

    <link rel="stylesheet" href="css/style.css" type="text/css">

</head>
<body>
    <div id="landscape">
        <img class="topslide" src="images/background/topslide.jpg"/>


        <img class="middleslide" src="images/background/middleslide.jpg"/>


      <img class="bottomslide" src="images/background/bottomslide.jpg"/>

    </div>

    <div id="portrait">
        <img class="topslide" src="images/background/topslideland.jpg"/>


        <img class="middleslide" src="images/background/middleslideland.jpg"/>


      <img class="bottomslide" src="images/background/bottomslideland.jpg"/>

    </div>

</body>

这是我的css：

html{
margin:0 auto;
width:100%;
}
body{
margin:0px auto;
height: 100%;
width: 100%;
background: url(../image/background/background.jpg) ;    
}     
@media screen and (orientation:landscape) {
#landscape {display:block;}
#portrait {display:none;}
}
@media screen and (orientation:portrait) {
#landscape {display:none;}
#portrait {display:block;}
}
#landscape{
margin: 0 auto;
}
#portrait{
margin: 0 auto;
}
 img.topslide{
display:block;   
max-width:100vw;
height:33.3vh;
}
img.middleslide{
display:block;    
max-width:100vw;
height:33.3vh;
}
img.bottomslide{
display:block;    
max-width:100vw;
height:33.3vh;
}

我会感激任何帮助，谢谢。

Answer 1

似乎你误解了margin: 0 auto的作用。它不会使元素的内容居中;它使元素本身居中。

向您的#landscape和#portrait提供自己的width，或将margin: 0 auto应用于图片。您可以将图像或容器放在中心位置。或两者，如果你觉得有必要的话。

将图片居中的另一种方法是display将您的图片inline-block设为text-align: center并将{{1}}应用于其父母。

响应式网页：无法使用保证金居中内容：0 auto在所有容器上都有宽度

1 个答案: