How can I center an image link in html?-CodePudding

I'm trying to use an image as a link but only one image can be clicked and the other images aren't working as links. I use text-center class my HTML code:

 <div class="foot text-center">
            <a  href="https://www.facebook.com/basmaEsmailGh/"><img src="img/face.png" alt="facebook"></a>
             <a href="https://twitter.com"> <img src="img/tw.png" alt="twitter"></a>
           <a href="https://www.linkedin.com"> <img src="img/in.png" alt="linkedin"> </a>
       </div>

and my css file only has for "foot" class:

.foot{
height: 100px;
background-color: #401BE6;

}

what is the problem?

CodePudding user response：

u need to define a display: block; on that <a href=''> element

CodePudding user response：

Inline elements can't be aligned center unless we use the display: block property on them so apply the display: block property to the anchor elements

CodePudding user response：

I hope I interpreted your desired final outcome.
https://jsfiddle.net/vLk8gtjs/30/

Make your buttons inline instead of vertically stacked. Therefore: create a new class and class each link. I changed the bg to make it easier for me to work with

.img_links {
  text-align: center;
  display: inline-block;
  width: 32%;
}

This aligns links within your div footer box.

I'm not sure why your links aren't working. Try this solution out and leave a comment if your images are displayed, but not clickable.

CodePudding user response：

OPTION ONE

.foot.text-center {
    display: block;
    text-align: center;
}

OPTION TWO (INLINE CSS)

<div class="foot text-center" align="center">
    <a  href="https://www.facebook.com/basmaEsmailGh/"><img src="img/face.png" alt="facebook"></a>
    <a href="https://twitter.com"> <img src="img/tw.png" alt="twitter"></a>
    <a href="https://www.linkedin.com"> <img src="img/in.png" alt="linkedin"> </a>
</div>