Question

我有一个简单的问题要问：我的页面上有这些框

如您所见，框内的图像未正确对齐，可能是因为紧靠上方的<p>可以同时包含一行和两行。

是否可以自动将图像固定在框的中间并保持框的响应速度？

查看代码

<div id="parent">
                <div class="child no-autor">
                    <p>
                        Che cos'&#232;
                        la fattura elettronica
                    </p>
                    <img src="https://bdconsulenzastorage.blob.core.windows.net/site-assets/images/eFattura_images/ico-step-1.png" class="img-responsive child child-no-autor"/>
                    <a href="#">
                        <p>
                            <i class="material-icons middle-align-text">
                                play_circle_filled
                            </i>
                            Guarda il video
                        </p>
                    </a>
                </div>
                <div class="child no-autor">
                    <p>
                        Chi &#232; obbligato
                        alla
                        fatturazione elettronica
                    </p>
                    <img src="https://bdconsulenzastorage.blob.core.windows.net/site-assets/images/eFattura_images/ico-step-2.png" class="img-responsive child child-no-autor" />
                    <a href="#">
                        <p>
                            <i class="material-icons middle-align-text">
                                play_circle_filled
                            </i>
                            Guarda il video
                        </p>
                    </a>
                </div>
                <div class="child">
                        <h5>SCELTA 1</h5>
                    <p>
                        Intermediario
                        s&#236; o no
                    </p>
                    <img src="https://bdconsulenzastorage.blob.core.windows.net/site-assets/images/eFattura_images/png%20base%20300/01_g.png" class="img-responsive child child-one-line" />
                    <a href="#">
                        <p>
                            <i class="material-icons middle-align-text">
                                play_circle_filled
                            </i>
                            Guarda il video
                        </p>
                    </a>
                </div>

.less上的代码

    #parent {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }

    .child {
        // background: red;
        flex: 1;
        min-width: 15%;
        margin-right: 10px;
        border: 2px solid #c1bdbe;
        margin-bottom: 25px;
        max-height: 260px;
        a {
            color: #5b93a2;
        }
        .middle-align-text {
            vertical-align: middle;
        }
        &.child-one-line {
            margin-top: 25px;
        }
        &.child-no-autor {
            margin-top: 35px;
        }
        &.no-autor {
            p {
                margin-top: 10px;
            }
        }
        .img-responsive.child {
            width: 45px;
            height: 45px;
            display: block;
            margin-left: auto;
            margin-right: auto;
            border: none;
        }
        p {
            font-weight: bold;
            font-size: 11px;
        }
        h5 {
            color: #5b93a2;
            font-weight: bold;
        }
    }

Answer 1

请为这些标签使用此样式。

img{
    width:auto;
    margin:0 auto;
    display:block;
    float:none;
    max-width:100%;   
}

图像固定在中心框内

1 个答案: