如何使图像居中和左对齐? [英] How can I center and left align images?
问题描述
我正在使用图片库,并且希望图像的容器完全位于页面的中心,但是图像保持对齐.
这是我想要的输出:
但是,当我尝试在容器上执行 text-align:center
(id: gallery
)时,我得到的图像显示如下:
我尝试过跟前一个堆栈溢出问题有关的问题:
我该怎么做才能实现所需的输出?
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 {文本对齐:居中;}#图片{显示:inline-block;文字对齐:左;}img {宽度:300像素;光标:指针;}.overlay {位置:绝对;正确:0;左:0;光标:指针;可见性:隐藏;颜色:透明;最高:0;底部:0;宽度:100%;高度:100%;过渡:所有缓入.3s;}.overlay>img {高度:50%;宽度:50%;最高:50%;可见性:隐藏;左:50%;转换:translate(-50%,-50%);位置:绝对;}.overlay:hover>img {能见度:可见;}.容器 {职位:相对显示:inline-block;边距:5px;}.container:hover .overlay {能见度:可见;不透明度:.6;背景:黑色;白颜色;}
给您的 #gallery
div 最大宽度
, text-align:center
和 margin:auto
,然后将标题放在 #gallery
内,但在 #images
之外的另一个div中.然后在 #images
div上放置 text-align:left
.
请参见下面的示例:
#gallery {文本对齐:居中;最大宽度:420px;保证金:自动;}img {宽度:100px;光标:指针;}.容器 {显示:inline-block;}#图片 {文字对齐:左}
< div id ="gallery">< div id ="header">< h1>标头</h1></div>< div id ="images">< div class ="container">< a href ="http://thecatapi.com/api/images/get?id=d42">< img src ="http://thecatapi.com/api/images/get?id=d42"></a></div>< div class ="container">< a href ="http://thecatapi.com/api/images/get?id=21o">< img src ="http://thecatapi.com/api/images/get?id=21o"></a></div>< div class ="container">< a href ="http://thecatapi.com/api/images/get?id=49e">< img src ="http://thecatapi.com/api/images/get?id=49e"></a></div>< div class ="container">< a href ="http://thecatapi.com/api/images/get?id=13v">< img src ="http://thecatapi.com/api/images/get?id=13v"></a></div>< div class ="container">< a href ="http://thecatapi.com/api/images/get?id=6e6">< img src ="http://thecatapi.com/api/images/get?id=6e6"></a></div>< div class ="container">< a href ="http://thecatapi.com/api/images/get?id=4bf">< img src ="http://thecatapi.com/api/images/get?id=4bf"></a></div></div></div>
I am working on an image gallery and want have the image's container be completely centered on the page, but the images are left aligned.
This is my desired output:
However, when I try to do a text-align: center
on the container(id: gallery
) I am getting the images displayed like this:
I tried following suit with a previous stack overflow question: CSS: Center block, but align contents to the left
and wrap the images in another div then align it with display: inline-block;
and text-align: left;
but the images just seem to align left on the entire page:
What can I do to accomplish my desired output?
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;
}
Give your #gallery
div a max-width
, text-align: center
, and margin:auto
, then put your header in another div inside the #gallery
, but outside the #images
. Then put text-align: left
on your #images
div.
See example below:
#gallery {
text-align: center;
max-width: 420px;
margin: auto;
}
img {
width: 100px;
cursor: pointer;
}
.container {
display: inline-block;
}
#images {
text-align: left
}
<div id="gallery">
<div id="header">
<h1>Header</h1>
</div>
<div id="images">
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=d42">
<img src="http://thecatapi.com/api/images/get?id=d42">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=21o">
<img src="http://thecatapi.com/api/images/get?id=21o">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=49e">
<img src="http://thecatapi.com/api/images/get?id=49e">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=13v">
<img src="http://thecatapi.com/api/images/get?id=13v">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=6e6">
<img src="http://thecatapi.com/api/images/get?id=6e6">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=4bf">
<img src="http://thecatapi.com/api/images/get?id=4bf">
</a>
</div>
</div>
</div>
这篇关于如何使图像居中和左对齐?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!