Menu
I have an anchor element that looks like this
<a href="url"><img src="imgurl"/>Text</a>
I would like the image and the text of the anchor element to vertically align. I've tried adding vertical-align (css), padding, margins, ets, but the image will not vertically align with the text.
974
How to Center an Image Using Text Align: Center. An <img> element is an inline element (display value of inline-block ). It can be easily centered by adding the text-align: center; CSS property to the parent element that contains it.
Another way to center an anchor tag is to use the margin property. This can be applied to the anchor tag itself, or to a parent element. If you want to center an image within an anchor tag, you can use the background-position property. Finally, you can use the flex property to center an anchor tag.
1) Centering links by putting it inside of a text aligned div. Place the HTML link inside of a div. In the styles for the div, apply text-align:center and make the anchor tag an inline-block (display:inline-block).
Using the <center> tagYou can center a picture by enclosing the <img> tag in the <center></center> tags. This action centers that, and only that, picture on the web page. It should be noted that this method is deprecated in HTML5 and will not always work in all browsers going forward.
Vertical align only really applies to sibling elements. This should work:
<a href="url"><img scr="imgurl"/><span>Text</span></a>
With CSS:
a img, a span { vertical-align: middle; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
