有一个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;整个居中,但是不能影响到下面的子集元素居中
实在不知道怎么做了,求解答,谢谢!
.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元素的图片大小,设置图片浮动,并增加了图片的边距
这样也可以实现。非常感谢各位,谢谢!
.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就没有宽度放第三张了,于是就换行了