如何对齐链接 HTML/CSS

Question

I have tried to do the following, as well as using the align only with the <a> href and <img> tags, yet I still cannot align the clickable image to the center of the page.

 <a href="next.html" align="middle"> <img src="tlbr.png" align="middle"> </a>

The float tag also does not work in any way I have tried, since, as far as I am aware, there is no way to float to center.

Any solution, directly in HTML or in the CSS, would be great. Thanks.

Answer 1

Check out the demo and try like this: Demo

a img {
   margin:0 auto;    
   display:block;
}

Answer 2

Add display: block; text-align: center; display: block; text-align: center; to href link. And try.

Answer 3

Add this code to your CSS:

a img{
   display: block;
   text-align: center;
}

JSFIDDLE DEMO

Answer 4

First of all, you should set width and display for your a element and them display the img tang and using margin: 0 auto to set the image in center:

 <a href="#" align="middle" style="width: 100%; display: block; background: #ccc;"> <img src="http://caster.ir/public/images/logo.png" align="middle" style="display: block; margin: 0 auto;"> </a>

Answer 5

The <img> tag align Attribute aligns the image vertically with respect to the line. The <a> tag does not recognise the align attribute.

If you are trying to centre an image horizontally then you might want to try using the following:

<a href="next.html">
   <img id="myImg" src="tlbr.png" />
</a>

Then in your CSS stylesheet:

#myImg {
   margin-left: auto;
   margin-right: auto;
}

Hope this helps.

Answer 6

Or you could add a <p> tag and then align it. For example:

<a href="link.com">
   <p align="center">Hello World!</p>
</a>