html - CSS 图像不在媒体查询上水平居中

Question

当网站被缩短时，我试图以 block 形式显示图像及其描述。我认为将 margin-left 和 margin-right 设置为 auto，并将 display 设置为 block 将使任何图像居中。

http://jsfiddle.net/8r5u22dm/

HTML

<div class="content">
    <div class="post-container">                
       <div class="post-thumb"><img src="img/flight_sun.png" id="first_image"/></div>
       <div class="post-content"><h1>Boeing 747</h1><p>             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed aliquam eros, vel ultricies eros. Donec fermentum quis lacus quis lacinia. Quisque imperdiet, orci quis ultrices accumsan, sapien libero venenatis risus, in bibendum magna orci at ex. Ut lobortis, lorem id malesuada mollis, turpis ex finibus ipsum, sit amet semper est erat quis lorem. Nullam eu molestie eros, et ultricies magna. Mauris in eros condimentum, vehicula enim ac, scelerisque lorem. Cras commodo turpis viverra, vestibulum massa vitae, rutrum turpis. Sed lobortis elit quis ipsum molestie tincidunt.</p></div>
    </div>

    <div class="post-container">                
       <div class="post-thumb"><img src="img/flight_cloud.png" /></div>
       <div class="post-content"><h1>Sukhoi Su-35</h1><p>               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed aliquam eros, vel ultricies eros. Donec fermentum quis lacus quis lacinia. Quisque imperdiet, orci quis ultrices accumsan, sapien libero venenatis risus, in bibendum magna orci at ex. Ut lobortis, lorem id malesuada mollis, turpis ex finibus ipsum, sit amet semper est erat quis lorem. Nullam eu molestie eros, et ultricies magna. Mauris in eros condimentum, vehicula enim ac, scelerisque lorem. Cras commodo turpis viverra, vestibulum massa vitae, rutrum turpis. Sed lobortis elit quis ipsum molestie tincidunt.</p></div>
    </div>

    <div class="post-container">                
       <div class="post-thumb"><img src="img/flight_clear.png" /></div>
       <div class="post-content"><h1>F-22 Raptor</h1><p>                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed aliquam eros, vel ultricies eros. Donec fermentum quis lacus quis lacinia. Quisque imperdiet, orci quis ultrices accumsan, sapien libero venenatis risus, in bibendum magna orci at ex. Ut lobortis, lorem id malesuada mollis, turpis ex finibus ipsum, sit amet semper est erat quis lorem. Nullam eu molestie eros, et ultricies magna. Mauris in eros condimentum, vehicula enim ac, scelerisque lorem. Cras commodo turpis viverra, vestibulum massa vitae, rutrum turpis. Sed lobortis elit quis ipsum molestie tincidunt.</p></div>
    </div>
    <br><br>
</div>

CSS

.content {
    width: 75%;
    margin-top: -30px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.content p {
    font-size: 1.25em;
}

/* Decrease the width of description */

@media screen and (max-width: 1175px) {
    .post-content {
        width: 470px;
    }
}

/* Second decrease the width of description */
@media screen and (max-width: 990px) {
    .post-content {
        width: 410px;
    }
}

/* Collapse into block formation */
@media screen and (max-width: 995px) {
    .post-content {
        width: 100%;
        position: relative;
        margin-top: 300px;
    }

    .post-thumb {
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .post-thumb img {
        position: absolute;
        top: 0%;
        margin-top: 50px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
.container img {
    width: 200px;
    height: 200px;
    margin-right: 32px;
    border-radius: 200px;
}

.post-container{
    margin: 20px 20px 0 0;  
    overflow:hidden;
    position: relative;
}

.post-thumb img {
    float: left;
    clear:left;
    width: 200px;
    height: 200px;
    border-radius: 200px;

    position: absolute;
    top: 50%;
    margin-top: -100px;
    background: red;
}

.post-content {
    float:right;
    width: 618px;
}

.content h1 {
    font-style: italic;
}

/* Set maximum width for navigation */
@media screen and (max-width: 340px) {
    header nav a {
        padding: 0 0.4em;
        font-size: 1em;
    }

    .content {
        text-align: justify;
    }
}

Answer 1

如您所见here ，要使 margin: auto 起作用，您的元素不能有绝对或固定位置(您的图像具有绝对定位)并且它们不能 float (您的图像具有 float: left ).如果您从图像中删除这些属性，它们将居中。