html - 如何在容器中居中图像链接?
问题描述
我想了解为什么图像不一定正确居中。有人告诉我,默认情况下,<a>
标签是inline
元素,所以为了改变它们的大小,你需要将它们的display
属性更改为block
or inline block
。然后,一旦你设置了<a>
标签的宽度,你可以将标签的宽度设置<img>
为 100%,它将符合<a>
标签的形状。
HTML:
<!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:
.container {
display: flex;
flex-direction: column;
margin: 0 auto;
padding: 10px;
}
input[type="search"] {
height: 30px;
}
.images {
border: 1px red solid;
padding: 0 auto;
}
/* If a flex container is set to width */
但我试过它仍然没有工作。我知道图像在导入时有自己的尺寸,但这里的逻辑是什么?在处理图像时,我一直不得不尝试使用 CSS 设置,因为它们是如此不可预测。
解决方案
可能有4种可能。
1)将您的.images填充更改为 margin: 0 auto,如下所示:
.images {
border: 1px red solid;
margin: 0 auto;
}
2)根据您的布局,图像也可能占用 100% 的宽度。所以你还需要添加图像div text-align:center
。
3)您的图像 div 可以转换为display:flex
然后justify-content: center
在其上设置。
4)如果要使用.container内容居中。您可以align-item:center
在图像 div 上使用。因为,容器有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>
推荐阅读
- java - 在 java 中使用 .equals 方法时出现空指针异常
- angular - Angular8 ReactiveForms:在不同的FormGroup中具有相同名称的单选按钮输入?
- sql - 获取字段值过时的连续天数
- git - 提交注释以显示代码中所做的更改
- apache-kafka - 是否有一个选项可以为特定主题而不是全部配置 num 流线程?
- r - 创建具有不同行数的新 R 列到 df
- docker - 如何将 docker 镜像从 localhost docker 私有注册表拉到 GKE?
- ruby-on-rails - 如何为rails中的特定操作设置带有自定义域的自定义url
- azure - 使用托管标识从逻辑应用调用受 Azure AD 保护的 API
- excel - 从多维度数组中删除行