我想了解为什么图像不一定能正确居中。有人告诉我,默认情况下<a>
标签是inline
元素,因此要更改其大小,您需要将其display
属性更改为block
或{{ 1}}。然后,一旦设置了inline block
标签的宽度,就可以将<a>
标签的宽度设置为100%,它将与<img>
标签的形状一致。>
HTML:
<a>
CSS:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="js/lightbox/lightbox.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class=container>
<!-- <form action="form-field"> -->
<input type="search" id="site-search" placeholder="Search(16pt)">
<!-- </form> -->
<div class="images">
<a href= "photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="photos/thumbnails/01.jpg" alt="Image 1"></a>
<a href= "photos/thumbnails/02.jpg" data-lightbox="image-2"><img src="photos/thumbnails/02.jpg" alt="Image 2"></a>
<a href= "photos/thumbnails/03.jpg" data-lightbox="image-3"><img src="photos/thumbnails/03.jpg" alt="Image 3"></a>
<a href= "photos/thumbnails/04.jpg" data-lightbox="image-4"><img src="photos/thumbnails/04.jpg" alt="Image 4"></a>
<a href= "photos/thumbnails/05.jpg" data-lightbox="image-5"><img src="photos/thumbnails/05.jpg" alt="Image 5"></a>
<a href= "photos/thumbnails/06.jpg" data-lightbox="image-6"><img src="photos/thumbnails/06.jpg" alt="Image 6"></a>
<a href= "photos/thumbnails/07.jpg" data-lightbox="image-7"><img src="photos/thumbnails/07.jpg" alt="Image 7"></a>
<a href= "photos/thumbnails/08.jpg" data-lightbox="image-8"><img src="photos/thumbnails/08.jpg" alt="Image 8"></a>
<a href= "photos/thumbnails/09.jpg" data-lightbox="image-9"><img src="photos/thumbnails/09.jpg" alt="Image 9"></a>
<a href= "photos/thumbnails/10.jpg" data-lightbox="image-10"><img src="photos/thumbnails/10.jpg" alt="Image 10"></a>
<a href= "photos/thumbnails/11.jpg" data-lightbox="image-11"><img src="photos/thumbnails/11.jpg" alt="Image 11"></a>
<a href= "photos/thumbnails/12.jpg" data-lightbox="image-12"><img src="photos/thumbnails/12.jpg" alt="Image 12"></a>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/lightbox/lightbox-plus-jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
但是我尝试过它仍然没有工作。我知道图像在导入时具有自己的尺寸,但是这里的逻辑是什么?在处理图像时,我总是不得不考虑CSS设置,因为它们太不可预测了。
答案 0 :(得分:0)
可能有4种可能性。
1)将您的 .images 填充更改为margin:0自动,就像这样:
.images {
border: 1px red solid;
margin: 0 auto;
}
2)根据您的布局,图像的宽度也可能达到100%。
因此,您还需要在 images div上添加text-align:center
。
3)您的图像div可以转换为display:flex
,然后在其上设置justify-content: center
。
4)如果要使用 .container 内容居中。您可以在图像div上使用align-item:center
。由于容器具有flex-direction:column
.container {
display: flex;
flex-direction: column;
align-items:center;
margin: 0 auto;
padding: 10px;
border: 1px solid black;
}
input[type="search"] {
height: 30px;
}
.images {
border: 1px red solid;
margin: 0 auto;
text-align: center;
}
<div class=container>
<div class="images">
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="photos/thumbnails/01.jpg" alt="Image 1"></a>
<a href="photos/thumbnails/02.jpg" data-lightbox="image-2"><img src="photos/thumbnails/02.jpg" alt="Image 2"></a>
<a href="photos/thumbnails/03.jpg" data-lightbox="image-3"><img src="photos/thumbnails/03.jpg" alt="Image 3"></a>
<a href="photos/thumbnails/04.jpg" data-lightbox="image-4"><img src="photos/thumbnails/04.jpg" alt="Image 4"></a>
<a href="photos/thumbnails/05.jpg" data-lightbox="image-5"><img src="photos/thumbnails/05.jpg" alt="Image 5"></a>
<a href="photos/thumbnails/06.jpg" data-lightbox="image-6"><img src="photos/thumbnails/06.jpg" alt="Image 6"></a>
<a href="photos/thumbnails/07.jpg" data-lightbox="image-7"><img src="photos/thumbnails/07.jpg" alt="Image 7"></a>
</div>
</div>
答案 1 :(得分:0)
由于您的代码正在使用display: flex;
,因此这里是一种继续使用它的解决方案。但是,对于flex
images class
来说更有意义。要使内容居中,请根据align-items: center; justify-content: center;
使用flex-direction
。
旁注:padding: 0 auto;
不是问题,auto
没有padding
的值。
.container {
margin: 0 auto;
padding: 10px;
}
input[type="search"] {
height: 30px;
}
.images {
width: 245px;
display: flex;
flex-direction: row;
border: 1px red solid;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="js/lightbox/lightbox.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class=container>
<!-- <form action="form-field"> -->
<input type="search" id="site-search" placeholder="Search(16pt)">
<!-- </form> -->
<div class="images">
<div>
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1"></a>
</div>
<div>
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1"></a>
</div>
<div>
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1"></a>
</div>
<div>
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1"></a>
</div>
<div>
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1"></a>
</div>
<div>
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1"></a>
</div>
<div>
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1"></a>
</div>
<div>
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1"></a>
</div>
<div>
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1"></a>
</div>
<div>
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1"></a>
</div>
<div>
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1"></a>
</div>
<div>
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1"></a>
</div>
<div>
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1"></a>
</div>
<div>
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1"></a>
</div>
<div>
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1"></a>
</div>
<div>
<a href="photos/thumbnails/01.jpg" data-lightbox="image-1"><img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1"></a>
</div>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/lightbox/lightbox-plus-jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>