How to center an image inside an anchor tag?

vertically center image in anchor
how to align text and image in anchor tag
css vertical align image in a tag
center img tag in div
html center img inside div
how to center a picture
center image in div
text-align:center for image

You can check the outcome here in this link. At the bottom of the page, on the extreme right, there is a circle with an image of a tshirt. The image is not vertically centered properly.

The css of the anchor tag is this:-

.dfa {
    padding: 5px 5px;
    font-size: 30px;
    width: 44px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
    //line-height: 10px;
}

.dfa-tshirt {
    background: #2c4762;
    color: white;
}

The HTML is this:-

<a href="https://disabilityloverstshirtbuilders.com/" class="dfa dfa-tshirt">
    <img src="https://png.icons8.com/color/100/t-shirt.png" style="width:35px; height:35; margin:auto; top:0; right:0; bottom:0; left:0;"/>
</a>

How can I center it? For the time being, I am using inline css for the img, which I will later remove to css file.

I would recommend to just keep it simple, let flex handle it for you. All your margins and padding will exacerbate things when your image changes sizes or other common situations

.dfa-tshirt {
    background: #2c4762;
}

a {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius:50%;
  width: 44px; height: 44px;
}
a img {
  width: 35px; height: 35px;
}
    <a href="https://disabilityloverstshirtbuilders.com/" class="dfa-tshirt">
        <img src="https://png.icons8.com/color/100/t-shirt.png" />
    </a>

How to center an image inside an anchor tag?, I would recommend to just keep it simple, let flex handle it for you. All your margins and padding will exacerbate things when your image  You can set button images in paragraphs or lists and use them like the thumbnail demo above. You can also open web pages . We'll use this one to put a parrot in the iframe above.

The images parent needs to be displayed inline-block

.dfa {
    padding: 5px 5px;
    font-size: 30px;
    width: 44px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
    display: inline-block;
}

The inline style should just be

<img src="https://png.icons8.com/color/100/t-shirt.png" style="width: 35px; height: 35px;"/>

How to center image inside a tag ?, I want to add image inside a tag. Milford Sound in New Zealand. New Zealand. May 17, 2013 at 4:42 am #135400 · Hugo Giraudel. Participant. if you wrap an image in an a tag the image is clickable, it will direct you to the href of the a tag. So if you want the image to click to the source of the image. You have to use the same url to the image in the href.

I have just checked you site url, you can add two lines for the class as bellow.

display: table; float: right;

  .dfa {
        padding: 5px 5px;
        font-size: 30px;
        width: 44px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        border-radius: 50%;
        display: table;
        float: right;
   }

Img tag

<img src="https://png.icons8.com/color/100/t-shirt.png" style="width: 35px; height: 35px;"/>

how does putting an <img> tag inside of an <a> tag make it a link , if you wrap an image in an a tag the image is clickable, it will direct you to the href of the a tag. So if you want the image to click to the source of  Instead of using text-align to center an image, you should tell the browser explicitly that the image is a block-level element. This way, you can center it as you would any other block. Here is the CSS to make this happen:

Use this:

img { vertical-align: middle; }

.dfa {
    padding: 5px 5px;
    font-size: 30px;
    width: 44px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
    line-height: 10px;
}

.dfa-tshirt {
    background: #2c4762;
    color: white;
}

img {
    vertical-align: middle;
    width:35px;
    height:35px;
}
<a href="https://disabilityloverstshirtbuilders.com/" class="dfa dfa-tshirt">
    <img src="https://png.icons8.com/color/100/t-shirt.png">
</a>

How can we center an image horizontaly inside an LI?, It would be a little easier if the image were also part of the link. If by doing that, we can have the image inside the anchor and still have to text of the anchor to  Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Full Page Tabs Hover Tabs Top Navigation Responsive Topnav Navbar with Icons Search Menu Search Bar Fixed Sidebar Side Navigation Responsive Sidebar Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Sidebar with Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation Responsive Bottom Nav Bottom Border Nav Links Right Aligned Menu Links Centered Menu Link Equal Width Menu Links Fixed Menu Slide Down Bar on Scroll Hide

How to center text in anchor tag without line height?, I am trying to find the most elegant way to center text in an anchor tag, and have already googled for answers but couldn't find something that  The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination. By default, links will appear as follows in all browsers: An unvisited link is underlined and blue; A visited link is underlined and purple

CSS: centering things, Note that the lines inside the block are not centered (they are left-aligned), unlike in the earlier example. This is also the way to center an image: make it into  Learn how to center align image inside div using HTML and CSS. You can center align single or multiple image using CSS text align propery for the div element. This is the simple yet efficient method to center align any image you want inside the div element.

Vertically Align an Image in an Anchor Tag, On another page, I want the divs to align left so they run horizontally. (The text inside the div will adjust according.) In summary, the results page  If you have many blocks of text to center, use CSS inside <style></style> tags in the head section of the page or in an external style sheet. See the example code below for how to set all text inside the <p></p> tags to be centered.

Comments
  • That was fantastic, but there is another issue. The circle is moved downward instead of stating with other icons side by side. Check the link
  • Sorry I didn’t click on the link for security reasons, also, this site has a big link rot issue. Another reason I don’t click on them. If you would like to update your question with all the code necessary for future question seekers that would be great
  • No prob @soulshined, I have update the code with float: right and a margin:top
  • display: flex; support for old browsers ?
  • valid point @Lasantha but I can not assume what any OP specs are targeted for, and without specification I answered accordingly. For those who need browser compatibility: developer.mozilla.org/en-US/docs/Web/CSS/flex or caniuse.com/#feat=flexbox