Почему обертывание изображения в теге <a>меняет стиль изображения? - PullRequest
Новая
       64

Почему обертывание изображения в теге <a>меняет стиль изображения?

0 голосов
/ 28 марта 2020

У меня есть ряд изображений внутри flexbox, содержимое которого выровнено по центру, а элементы выровнены по центру; ie содержимое должно быть центрировано по вертикали и горизонтали.

Все выглядело великолепно, пока я не пошел и не обернул эти изображения в теги, чтобы сделать их кликабельными. Это изменяет стиль, увеличивая изображение на несколько пикселей и означая, что оно больше не центрируется по вертикали.

На изображениях ниже я поместил цветной div за изображениями, чтобы их было легче просматривать:

Вот как это выглядит со всеми изображениями, обернутыми в ссылки

Вот так это выглядит с 2 изображениями (в Великобритании и Франции), "развернутыми" из ссылки

Как вы можете видеть, флаг Великобритании и Франции помечает его вертикально по центру, когда он не обернут в теги, а остальные нет. Единственное CSS, которое у меня есть для тегов: 

a {
    text-decoration: none;
    color: #000000;
}

Довольно стандартный, я думаю? Мой HTML для изображения, обернутого в ссылку ниже. (lang_container_desktop - цветной div, header_links - это flexbox, содержащий изображения): 

<div class="header_links">
    <div class="lang_container_desktop">
        <a href="operation.php?op=changelang&lang=nederlands">
            <img src="assets/nederland.png" alt="Nederlands" style="width: 2vh; height: 2vh;">
        </a>            
    </div>
</div>

CSS для flexbox: 

.header_links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 1vw;
    padding-right: 1vw;
    height: 4vh;
    width: auto;
}

FYI, да, проблема по-прежнему возникает, когда изображение не сидит в цветном div:)

Заранее спасибо всем, кто может указать мне правильное направление!

1 Ответ

0 голосов
/ 28 марта 2020

Смещением в правильном направлении от @ shutupchi go я экспериментировал с моим тегом в таблице стилей, и теперь он работает.

Я добавил те же свойства flexbox из flexbox в тег и все теперь вертикально центрирован, как и должно быть. Я добавил код CSS ниже. Надеемся, что это решение может помочь кому-то в будущем! 

a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #000000;
}
...