我正在制作一个图库,并希望图像容器完全居中于页面,但是图像左对齐。
这是我的期望输出:
但是,当我尝试在容器(id:gallery
)上执行text-align:center
时,图像会显示如下:
我尝试跟随以前的堆栈溢出问题:CSS:中心块,但将内容对齐到左侧,然后将图像包装在另一个div中,然后使用display:inline-block;
和text-align:left;
对其进行对齐,但是图像似乎只能在整个页面左对齐:
我该怎么做才能实现我的期望输出?
HTML
<div id="gallery">
<div id="images">
<div class="container">
<a href="images/gallery/image1.jpg" data-lightbox="mygallery">
<img src="images/gallery/image1.jpg">
<div class="overlay">
<img src="images/magnify.png">
</div>
</a>
</div>
<div class="container">
<a href="images/gallery/image2.jpg" data-lightbox="mygallery">
<img src="images/gallery/image2.jpg">
<div class="overlay">
<img src="images/magnify.png">
</div>
</a>
</div>
</div>
</div>
CSS
#gallery{
text-align: center;
}
#images{
display: inline-block;
text-align: left;
}
img{
width: 300px;
cursor: pointer;
}
.overlay {
position: absolute;
right: 0;
left: 0;
cursor: pointer;
visibility: hidden;
color: transparent;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
transition: all ease-in .3s;
}
.overlay > img{
height: 50%;
width: 50%;
top: 50%;
visibility: hidden;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
.overlay:hover > img{
visibility: visible;
}
.container {
position: relative;
display: inline-block;
margin: 5px;
}
.container:hover .overlay {
visibility: visible;
opacity: .6;
background: black;
color: white;
}
#gallery
添加max-width
并且加上margin:auto
- undefined