图像固定在中心框内

Posted 2023-03-06

【中文标题】图像固定在中心框内

【英文标题】：image fixed inside box at center

【发布时间】：2018-12-23 17:21:39

【问题描述】：

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

如您所见，框内的图像没有正确对齐，可能是因为上面的<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;
        
    

【参考方案1】：

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

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

【讨论】：

编辑：但我必须在child 属性上添加flex-direction: column; display: flex;

显示：弹性；可能不支持所有浏览器。但这种 CSS 样式适用于所有浏览器。