Question 301022 in Html Question posted in
Some basic documentation can be found here.

Html – When I make my image a link it messes up my positioning – how do I prevent this

I am making a webpage which has large text to the left and 2 images to the right: My code:

<section id="cover">
<div class="container">
    <div class="row ">
                <div class="col-md-8">
                    <br>
                    <h1>EVER THOUGHT ABOUT ACTING?</h1>
                    <br>
                </div>
                    
                <div class="col-md-4 centre_text">
                    <img src="public/img/red.png" alt="Take the red pill" >
                    <img src="public/img/blue.png" alt="Take the blue pill" >
                </div>
    </div>
</div>

When I try to make the images clickable elements, it moves the content of the DIV to the left (below the text Div).

So basically when I do this

            <a href="#"><img src="public/img/red.png" alt="Take the red pill" ></a>
            <a href="#"><img src="public/img/blue.png" alt="Take the blue pill" ></a>

This causes the images to move to the bottom left.

I would like my images to stay as they are, after I have made them links. Can anybody advise how to do this? I tried removing my ‘centre_text’ class and also tried sizing the image, but neither of these made a difference.

Many thanks

Site as it should display

Site when I make the images links

I have attached some pics.

THis is my CSS (taking into account Amirs answer)

.centre_text{
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 10px;
            text-align: center;
            }

.centre_text a {
    display: inline-block;
}
Tags:

2

Answers


  1. 0

    Anchor tags (<a>) are inline elements by default, while images (<img>) are inline-block

    Add this to your CSS

    .centre_text a {
    display: inline-block;
}

    Note that sometimes inline-block elements don’t align properly vertically. You can fix this by setting vertical alignment (vertical-align)

    Login or Signup to reply.
  2. 0 
      .centre_text{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 10px;
        text-align: center;
        }

     .centre_text a {
         display: inline-block;
        }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search