Question

我是HTML和CSS的新手，我无法弄清楚这一点。我已设法水平对齐三张图片，以便他们在网页上舒适地坐在一起。它们的大小也都根据我的需要而定。但是，我尝试使用Lightbox脚本（允许您在弹出窗口中查看图像），为此，图像标记需要包含在<a>标记中以链接到Lightbox脚本。但是，当我添加<a>标签时，图像会完全错位并且不成比例。有什么建议吗？

<div class="imagecont">
    <a href="images/gallery/tube1.jpg" data-lightbox="gallery0" data-title="24-Hour Tube concept art.">
        <img class="imagecenter" src="images/gallery/tube1.jpg" alt="Tube 1" style="width: 50%; height: 50%;"/>
    </a>
    <a href="images/gallery/tube2.jpg" data-lightbox="gallery0" data-title="24-Hour Tube concept art.">
        <img class="imagecenter" src="images/gallery/tube2.jpg" alt="Tube 2" style="width: 100%; height: 100%;"/>
    </a>
    <a href="images/gallery/tube3.jpg" data-lightbox="gallery0" data-title="24-Hour Tube concept art.">
        <img class="imagecenter" src="images/gallery/tube3.jpg" alt="Tube 3" style="width: 50%; height: 50%;"/>
    </a>
</div>

.imagecenter {
    justify-content: center;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: auto;
    margin-bottom: auto;
    vertical-align: middle;
    display: inline;
}

.imagecont {
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
    margin-top: 40px;
    margin-bottom: 40px;
}

Answer 1

在父母中使用align-items:center。

＆＃13;

.imagecont {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px auto;
}

.imagecont a {
  margin: auto 10px;
}

.full {
  width: 100%;
  height: 100%;
}

.half {
  width: 50%;
  height: 50%;
}

＆＃13;

<div class="imagecont">
  <a href="//placehold.it/100" data-lightbox="gallery0" data-title="24-
Hour Tube concept art."><img class="imagecenter half" src="//placehold.it/100" alt="Tube 1" /></a>
  <a href="//placehold.it/100" data-lightbox="gallery0" data-title="24-
Hour Tube concept art."><img class="imagecenter full" src="//placehold.it/100" alt="Tube 2" />
  </a>
  <a href="//placehold.it/100" data-lightbox="gallery0" data-title="24-
Hour Tube concept art."><img class="imagecenter half" src="//placehold.it/100" alt="Tube 3" /></a>
</div>

＆＃13;

Answer 2

您也可以在锚标记上使用CSS。

img a { adjust spacing as needed }

或使其成为这些元素的特殊类。

img a.anchorimage { adjust spacing as needed }

或者更好的是，在进行任何自己的样式之前，请先使用重置样式表。

http://cssreset.com/what-is-a-css-reset/

使用Anchor标记时，为什么我的图像会变得不对齐？

2 个答案: