Text-align: center wont's apply to a link after an image

user_12413190 0
Viewed 65

I found the way to make a link to align, if I do the break between img and the link.

<section id="home" style="background-image: url(https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);">
  <h1>It's my super wooper page</h1>
  <img class="profile-picture" src="assets/img/My_Picture.JPG" alt="picture of myself">
  <br>
  <a class="btn-cv" href="#">Download CV</a>
</section>

The question is WHY the link won't just align, as it is a text-element. And what is even more "weird", the margin won't work for the link, so it keeps sticking to the image. I know, I could give the image some margin-bottom, but I's really like to understand, what is happening in the backgrond.

css html
2 Answers

If you want to align the link in the center. You should put text-align: center; on the parent element and not on the <a>. It's because the <a> is an inline element.

user_87770690

Can you please check the below code? Hope it will work for you. <a> is an inline element. if you are applying a margin to <a> tag then you need to give display:inline-block property to <a>

Please refer to this link: https://jsfiddle.net/yudizsolutions/pt68qczy/

.text-center {
  text-align: center;
}

.btn-cv {
  margin: 10px 0px;
  display: inline-block;
}
<section id="home" style="background-image: url(https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);">
  <h1>It's my super wooper page</h1>
  <img class="profile-picture" src="assets/img/My_Picture.JPG" alt="picture of myself">
  <br>
  <div class="text-center">
    <a class="btn-cv" href="#">Download CV</a>
  </div>
</section>

user_122138960
Related