Question

我正在尝试垂直对齐10个图像，5个在顶部，5个在底部，看起来像这样： enter image description here

问题在于我无法做到并且它让我疯了。以下是图库的HTML代码：

    <div class ="gallery">
<div class="img_cont">
    <div class="set1">
                <ul>
                    <div class ="item"><li><a href="#"><img src ="/public/images/img1.jpg"  width="200" height="200"    alt="Hole 1"></li></div>    
                    <div class ="item"><li><a href="#"><img src ="/public/images/img2.jpg"  width="200" height="200"    alt="Hole 2"></li></div>
                    <div class ="item"><li><a href="#"><img src ="/public/images/img3.jpg"  width="200" height="200"    alt="Hole 3"></li></div>
                    <div class ="item"><li><a href="#"><img src ="/public/images/img4.jpg"  width="200" height="200"    alt="Hole 4"></li></div>
                    <div class ="item"><li><a href="#"><img src ="/public/images/img5.jpg"  width="200" height="200"    alt="Hole 5"></li></div>                        
                </ul>
    </div>
</div>

<div class="img_cont">
    <div class="set">
                <ul>
                    <div class ="item"><li><a href="#"><img src ="/public/images/img6.jpg"  width="200" height="200"    alt="Hole 6"></li></div>    
                    <div class ="item"><li><a href="#"><img src ="/public/images/img7.jpg"  width="200" height="200"    alt="Hole 7"></li></div>
                    <div class ="item"><li><a href="#"><img src ="/public/images/img8.jpg"  width="200" height="200"    alt="Hole 8"></li></div>
                    <div class ="item"><li><a href="#"><img src ="/public/images/img9.jpg"  width="200" height="200"    alt="Hole 9"></li></div>
                    <div class ="item"><li><a href="#"><img src ="/public/images/img10.jpg"  width="200" height="200"   alt="Hole 10"></li></div>
                </ul>
        </div>
    </div>

和以下是我用于特定图库的CSS代码：

    .gallery li:hover{
    transform:scale(1.2,1.2);


}


.gallery {

position: relative;
width: 100%;
border: 1px solid black;


}
.img_cont{

padding-top: 20%; /* forces 1:1 aspect ratio */


}



.item{

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
vertical-align:center;
text-align:center; /* Align center inline elements */
font: 0/0 a;
}

我的问题是图像卡在中间位于彼此之上，我需要它们如图所示。你能不能给我一个建议并告诉我我做错了什么，提前谢谢！

Answer 1

试一试 - https://jsfiddle.net/8mx25314/ 希望这会有所帮助。

更新了css

 .gallery li:hover{
    transform:scale(1.2,1.2);
}

.gallery {
position: relative;
width: 100%;
border: 1px solid black;
}
.img_cont{
padding-top: 20%; /* forces 1:1 aspect ratio */
}
.item{
top: 0;
bottom: 0;
left: 0;
right: 0;
vertical-align:center;
text-align:center; /* Align center inline elements */
font: 0/0 a;
width: 17%;
padding-left:2.5%;
}
.item img{
    width: 100%!important;
    height: auto;
}
ul{
    list-style:none;
    display: inline-flex;
    width: 100%;
    padding:0px;
}

Answer 2

HTML和CSS存在很多问题，这些问题搞砸了你的意图：

不关闭img或a代码
不必要地使用ul
div标记为ul
所有.item div绝对定位到同一个地方

我已经简化了你的代码以显示没有ul的两行对齐图像以及更易理解的样式：

https://jsfiddle.net/Lot8r08p/

（我使图像相当小，以适应jsfiddle窗口）

HTML：

<div class ="gallery">
    <div class="img_cont">
        <div class="set1">
            <div class ="item"><a href="#"><img src ="/public/images/img1.jpg" alt="Hole 1" /></a></div>    
            <div class ="item"><a href="#"><img src ="/public/images/img2.jpg" alt="Hole 2"/></a></div>
            <div class ="item"><a href="#"><img src ="/public/images/img3.jpg" alt="Hole 3"/></a></div>
            <div class ="item"><a href="#"><img src ="/public/images/img4.jpg" alt="Hole 4"/></a></div>
            <div class ="item"><a href="#"><img src ="/public/images/img5.jpg" alt="Hole 5"/></a></div>                             </div>
    </div>

    <div class="img_cont">
        <div class="set">
            <div class ="item"><a href="#"><img src ="/public/images/img6.jpg" alt="Hole 6"/></a></div>    
            <div class ="item"><a href="#"><img src ="/public/images/img7.jpg" alt="Hole 7"/></a></div>
            <div class ="item"><a href="#"><img src ="/public/images/img8.jpg" alt="Hole 8"/></a></div>
            <div class ="item"><a href="#"><img src ="/public/images/img9.jpg" alt="Hole 9"/></a></div>
            <div class ="item"><a href="#"><img src ="/public/images/img10.jpg" alt="Hole 10"/></a></div>                
        </div>
    </div>
</div>

CSS：

.gallery {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.gallery .img_cont {
    text-align: center;
}

.item{
    display: inline-block;
}

.item img {
    width: 60px;
    height: 60px;
}

在CSS中创建垂直对齐的库的问题

2 个答案: