文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在容器中对图像链接进行居中？

问如何在容器中对图像链接进行居中？
EN

Stack Overflow用户

提问于 2019-06-11 12:10:22

回答 2查看 94关注 0票数 0

我想了解为什么图像不一定是正确的中心。我被告知，默认情况下，<a>标记是inline元素，因此要更改它们的大小，需要将它们的display属性更改为block或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设置来解释，因为它们是如此不可预测。

https://ibb.co/Y02j6VL

css

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-11 12:21:29

可能有四种可能性。

1)将您的.images填充更改为so: 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内容来居中。您可以在图像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>

票数 0

Stack Overflow用户

发布于 2019-06-11 12:31:31

由于您的代码正在使用display: flex;，这里有一个继续使用它的解决方案。然而，对于flex images class来说，这更有意义。要对内容进行中心化，请根据align-items: center; justify-content: center;使用flex-direction。

Sidenote：padding: 0 auto;不是一件事，padding没有auto值。

.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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56543404

复制

相似问题

问如何在容器中对图像链接进行居中？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在容器中对图像链接进行居中？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在容器中对图像链接进行居中？
EN