为什么使用锚标签时图像变得不对齐？

我是新来的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; 
}

来源

2017-04-21 Jacob Webb

在父代替使用align-items:center。

.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%; 
 
}

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

来源

2017-04-21 16:42:22 dippas

你也可以简单地使用CSS的定位标记。

img a { adjust spacing as needed }

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

img a.anchorimage { adjust spacing as needed }

或更好的，使用重置样式表开始之前做任何你自己的样式。

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

来源

2017-04-21 16:54:43 psiclone

当您在a标签包裹图像，a标签现在变成了柔性物品，其对图像进行前（即.imagecont DIV是柔性容器的子女），并且图像成为a标签的子女。因此，您必须将所需的尺寸，对齐方式等应用到a标签，并使图像相对于a标签，例如heigth: 100%。

来源

2017-04-22 00:27:02 Johannes

为什么使用锚标签时图像变得不对齐？

回答

相关问题