响应式网页：无法使用边距使内容居中：0 自动在所有容器上具有宽度答案

【问题标题】：Responsive web page: Unable to center content using margin: 0 auto have width on all containers响应式网页：无法使用边距使内容居中：0 自动在所有容器上具有宽度
【发布时间】：2013-08-16 06:55:02
【问题描述】：

抱歉，我知道有人问过类似的问题，但我仍然无法解决。我希望正文中的图像居中，但只有当纵横比意味着右侧有空白时，我尝试使用 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;
}

如果有任何帮助，我将不胜感激，谢谢。

【问题讨论】：

标签： responsive-design margin center percentage

【解决方案1】：

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

为您的#landscape 和#portrait 提供自己的width，或将margin: 0 auto 应用于图像。您要么将图像或它们的容器居中。或者两者兼而有之，如果您认为有必要。

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

【讨论】：