Проблема с выравниванием изображения и ссылки - PullRequest
Новая
       44

Проблема с выравниванием изображения и ссылки

0 голосов
/ 28 мая 2020

Итак, у меня проблема с моим CSS, когда я не могу отобразить текстовую ссылку, встроенную в мое изображение. Ссылки находятся на другой высоте относительно моего изображения? В чем может быть проблема? Я пробовал использовать разные методы выравнивания, такие как vertical-align et c.

Может, мне стоит переписать весь код? 

html,
body {
    font-family: 'Open Sans', sans-serif;
    background-color: #efefef;
}

body{
    margin: 0;
}

.left_div {
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #fff;
    position: fixed;
    height: 100%;
    overflow: auto;
    text-align: center;
}

.left_div img {
    width: 50%;
    height: auto;
    margin: 2vh 0 2vh 0;
}

.left_div a {
    display: block;
    color: black;
    background-color: rgb(217, 50, 141);
    padding: 16px;
    text-decoration: none;
    width: 75%;
    margin: 2vh auto;
    border-radius: 5px;
    color: rgb(255, 255, 255);
    transition: all .2s ease-in-out;
}

.left_div a.active {
    background-color: rgb(65, 29, 100);
    color: white;
}

.left_div a:hover:not(.active) {
    background-color: rgb(153, 22, 94);
    color: white;
}

@media screen and (min-width: 765px) and (max-width: 968px) {
    .left_div {
        width: 100%;
        height: auto;
        position: relative;
        text-align: left;
    }

    .left_div img {
        width: 12.5%;
        height: auto;
        margin: 0 0 0 2vw;
    }

    .left_div a {
        display: inline;
        color: black;
        background-color: rgb(217, 50, 141);
        padding: 16px;
        text-decoration: none;
        margin: 0 auto;
        border-radius: 5px;
        color: rgb(255, 255, 255);
        transition: all .2s ease-in-out;

    }
}

@media screen and (max-width: 765px) {
    .left_div {
        width: 100%;
        height: auto;
        position: relative;
    }
    .left_div a {
        text-align: center;
        float: none;
    }
}

<!-- HTML -->


    <div class="left_div">

        <img src="img/mlp_logo.png" alt="My Little Pony Logo">


        <a class="active" href="#">Home</a>
        <a href="#">News</a>
        <a href="#">Contact</a>
        <a href="#">About</a>
      </div>

Вот jsfiddle, чтобы показать проблему.

https://jsfiddle.net/bcyu0f52

Спасибо!

редактировать (скриншот добавлен)

https://imgur.com/hwbmAKR Как вы видите на скриншоте, изображение и текст смещены по высоте.

Ответы [ 2 ]

0 голосов
/ 29 мая 2020

Как уже было сказано в комментариях, правильное вертикальное выравнивание помогло:

Решение заключалось в добавлении: 

.left_div img {
  vertical-align: middle; 
}
0 голосов
/ 28 мая 2020

Решено @ SaschaM78.

Я думаю, вы хотите, чтобы ваши теги a были выровнены по вертикали с изображением, верно? Если да, добавьте vertical-align: middle; в .left_div img. Обновленную скрипку можно найти здесь - @ SaschaM78

Спасибо! Маленькая ошибка новичка.

...