1

sorry I know similar questions have been asked but I still can't work it out. I want the images in the body to be centered but only when the aspect ratio means that there is white space on the right hand side, I have tried using margin: 0 auto but to no avail.

Here is my 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>

And here is my 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;
}

I'll be grateful for any help, thanks.

4

1 回答 1

0

好像你误解了什么margin: 0 auto。它不会将元素的内容居中；它使元素本身居中。

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

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

于 2013-09-08T19:46:02.690 回答