CSS如何實現(xiàn)每兩個圖片并列居中

有一個div包裹住4個a標(biāo)簽，每個a標(biāo)簽下有一個img，請問怎么實現(xiàn)每兩個圖片并列居中？a標(biāo)簽中的數(shù)據(jù)是從后端讀取出來的，所以沒法兒做成兩個div

<style type="text/css">
    .parent {
        margin: 20px auto;
        position: relative;
        float: left;
        left: 50%;
    }
    
    .parent a {
        text-align: center;
        position: relative;
        left: -50%;
        line-height: 200px;
    }
    
    .parent a img {
        vertical-align: -webkit-baseline-middle;
        width: 15vw;
        height: 22.1875vw;
    }
</style>

<body>
        <div class="parent">
            <a href="#">
                <img class="child" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2997512358,128380931&fm=27&gp=0.jpg" alt="">
            </a>
            <a href="#">
                <img class="child" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3463089434,1220014124&fm=27&gp=0.jpg" alt="">
            </a>
            <a href="#">
                <img class="child" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=737169489,2804162215&fm=27&gp=0.jpg" alt="">
            </a>
            <a href="#">
                <img class="child" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=214404826,2723871124&fm=27&gp=0.jpg" alt="">
            </a>
        </div>

嘗試了把div這個父級塊元素居中，margin:0 auto;但是里面的元素float:left;的時候，就4個圖片全部跑到左邊了

把行內(nèi)元素a變?yōu)閐isplay:block;也沒法兒繼承父級元素的居中

嘗試過把父元素line-height:500px;height:500;整個居中，但是不能影響到下面的子集元素居中

實在不知道怎么做了，求解答，謝謝！

回答

編輯回答

焚音

應(yīng)該還是蠻簡單的吧.

.parent {
    font-size: 0;
    text-align: center;
}

.parent a {
    display: inline-block;
    width: 50%;
}

2017年1月7日 00:44

編輯回答

不討囍

.parent {
    /*增加盒模型寬高*/
    /* width: 100%;
    height: 100%; */
    width: 40vw;
    height: 48vw;
    line-height: 25px;
    /*設(shè)置溢出隱藏*/
    overflow: hidden;
    /*增加div居中樣式*/
    margin-left: auto;
    margin-right: auto;
}

.parent a {
    text-align: center;
    position: relative;
    left: -50%;
    line-height: 200px;
}

.parent a img {
    vertical-align: -webkit-baseline-middle;
    /*定義圖片大小*/
    width: 15vw;
    height: 22vw;
    /*設(shè)置圖片浮動*/
    float: left;
    /*增加圖片邊距*/
    border: solid #fff 10px;
}

非常感謝秋水的答案，我剛剛嘗試了這樣的方法：
1.設(shè)置盒模型的寬高，設(shè)置溢出隱藏，增加div的居中樣式
2.定義img元素的圖片大小，設(shè)置圖片浮動，并增加了圖片的邊距

這樣也可以實現(xiàn)。非常感謝各位，謝謝！

2018年3月1日 18:26

編輯回答

尐飯團(tuán)

.parent {
    font-size: 0;
    text-align: center;
    width: 30vw;
    margin: 0 auto;
}
.parent a {
    display: inline-block;
}
.parent a img {
    vertical-align: -webkit-baseline-middle;
    width: 15vw;
    height: 22.1875vw;
}

給parent添加寬度為兩張圖的寬度，在margin:0 auto 居中，然后把a(bǔ)標(biāo)簽設(shè)置為行內(nèi)塊級元素，這樣一行放兩張圖片后，parent就沒有寬度放第三張了，于是就換行了

2018年7月18日 03:13