Ссылка растягивается на всю страницу (используя изображение в качестве ссылки) - PullRequest
Новая
       22

Ссылка растягивается на всю страницу (используя изображение в качестве ссылки)

0 голосов
/ 11 декабря 2018

Я пытаюсь назначить разные изображения в качестве ссылок, но гиперссылка, кажется, распространяется на остальную часть страницы (по горизонтали).

Это то, как изображения выглядят как ссылки, однако (как упомянуто выше) они простираются в обе стороны, но хороши сверху и снизу.https://imgur.com/a/kZi0Llk

Как бы я мог предотвратить это?

HTML: 

<body>

    <ul id="navbar">

        <li><a href="index.html">Home</a></li>
        <li><a class="active" href="anime.html">Anime</a></li>
        <li><a href="form.html">Whats your opinion?</a></li>

    </ul>

    <div class="animemid">

    <!-- Black Clover -->

        <div class="bc">
            <a class="link" href="blackclover.html">
                    <img style="vertical-align:middle" id="bcImg" src="assets/blackclover.jpg" width="400" height="225">
                    <h2 id="bcTag">Black Clover</h2>
            </a>
        </div>

    <!-- My Hero Academia -->

        <div class="mha">
            <a class="link" href="myheroacademia.html">
                    <img style="vertical-align:middle" id="mhaImg" src="assets/deku.png" width="400" height="225">
                    <h2 id="mhaTag">My Hero Academia</h2>
            </a>
        </div>

    <!-- Haikyuu!! -->

        <div class="hky">
            <a class="link" href="haikyuu.html">
                    <img style="vertical-align:middle" id="hkyImg" src="assets/haikyuuPage.jpg" width="400" height="225">
                    <h2 id="hkyTag">Haikyuu!!</h2>
            </a>
        </div>
    </div>
</body>

CSS: 

.animemid {
    margin-top: 69.5px;
}

.animemid h2 {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: white;
    text-decoration: none;
    text-align: center;
}

.animemid img {
    display: block;
    padding: 5px;
    border: 1px solid white;
    opacity: 0.75;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.animemid div {
    position: relative;
}

Заранее спасибо, e

1 Ответ

0 голосов
/ 11 декабря 2018

H2 является элементом блока.

Измените его на встроенный (или встроенный блок): 

.animemid h2 {
   display:inline;
...