作者:Hydhuyfh________ | 来源:互联网 | 2023-05-19 04:48
Ivefourlitagsandtheyallcontainsimagesinit.Now,Iwanttoshowimagesverticallycentera
I've four li
tags and they all contains images in it. Now, I want to show images vertically center and for this I've used display: table-cell
for all li
and on image I've used vertical-align middle. But margin isn't working when I am trying to put spacing between li's.
我有四个li标签,里面都有图片。现在,我想要显示垂直中心的图像,为此我使用了display: table-cell表示所有li,在图像上,我使用了垂直居中。但是当我试图在li之间设置间隔时,保证金并没有起作用。
Here is the JSFiddle
这是JSFiddle
HTML
HTML
CSS
CSS
.achievements ul {
margin: 0;
padding: 0;
list-style: none;
}
.achievements ul li {
min-width: 304px;
min-height: 208px;
vertical-align: middle;
display: table-cell;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-shadow: 0px 0px 3px #aaa;
color: #000;
margin-right: 14px;
padding-bottom: 32px;
max-width: 303px;
background: #fff;
font-family:'gafata';
padding-top: 32px;
line-height: 23px;
text-align:center;
}
.achievements ul li img {
vertical-align: middle;
}
1 个解决方案