素材牛VIP会员
CSS如何实现每两个图片并列居中
 超***媒  分类:Html5  人气:2349  回帖:4  发布于6年前 收藏

有一个div包裹住4个a标签,每个a标签下有一个img,请问怎么实现每两个图片并列居中?a标签中的数据是从后端读取出来的,所以没法儿做成两个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个图片全部跑到左边了

把行内元素a变为display:block;也没法儿继承父级元素的居中

尝试过把父元素line-height:500px;height:500;整个居中,但是不能影响到下面的子集元素居中

实在不知道怎么做了,求解答,谢谢!

 标签:csshtmlhtml5

讨论这个帖子(4)垃圾回帖将一律封号处理……

Lv3 码奴
阿***盗 页面重构设计 6年前#1
.parent {
    /*增加盒模型宽高*/
    /* width: 100%;
    height: 100%; */
    width: 40vw;
    height: 48vw;
    line-height: 25px;
    /*设置溢出隐藏*/
    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;
    /*设置图片浮动*/
    float: left;
    /*增加图片边距*/
    border: solid #fff 10px;
}

非常感谢秋水的答案,我刚刚尝试了这样的方法:
1.设置盒模型的宽高,设置溢出隐藏,增加div的居中样式
2.定义img元素的图片大小,设置图片浮动,并增加了图片的边距

这样也可以实现。非常感谢各位,谢谢!

Lv6 码匠
Ga***er 软件测试工程师 6年前#2
.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标签设置为行内块级元素,这样一行放两张图片后,parent就没有宽度放第三张了,于是就换行了

Lv4 码徒
黑***人 JS工程师 6年前#3

应该还是蛮简单的吧.

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

.parent a {
    display: inline-block;
    width: 50%;
}
Lv3 码奴
10***29 职业无 5年前#4
.parent {
    font-size: 0;
    text-align: center;
}

.parent a {
    display: inline-block;
    width: 50%;
}
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取