Question

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

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工作，您的元素必须没有绝对或固定的位置（您的图像具有绝对定位）并且它们不能浮动（您的图像具有{{1} }}）。如果从图像中删除这些属性，它们将居中。

CSS图像不是横向以媒体查询为中心

1 个答案: