爲什麼使用錨標籤時圖像變得不對齊？

我是新來的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

爲什麼使用錨標籤時圖像變得不對齊？

回答

相關問題