CODEWITHSUNDEEP
htmlcss
m4t1t0
m4t1t0

Reputation: 5721

Vertically align text inside anchor

I have this piece of HTML:

<a href="href" class="my-a-class>
    <img alt="alt" src="/path/to/image.jpg" class="my-img-class" />&nbsp;My text
</a>

I need to vertically align "My text" without affecting the image in the anchor. I can't add any HTML tag, I need to do this only with CSS. Any suggestion?

Upvotes: 20

Views: 19001

Answers (5)

boz
boz

Reputation: 4908

You could do this using .my-a-class { line-height: value }. Replace value with the height of your image.

Edit ---

These days it is much better to use flexbox for this:

.my-a-class {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

Upvotes: 29

Pablo V
Pablo V

Reputation: 71

The Proper Way to Align Images and Icons with Anchor Tags is

In your css

a {
   background: transparent url(/images/your_image) scroll no-repeat left center;
   padding: 2px 0px 2px 20px; //fit as you need
}

In your HTML

<a href="url">Text</a>

Upvotes: 0

Guffa
Guffa

Reputation: 700182

Align the image to the text:

.my-a-class img { vertical-align: middle; }

Demo: http://jsfiddle.net/Guffa/hz6AV/

Upvotes: 3

Jamir Khan
Jamir Khan

Reputation: 397

Try this code:

a {
    position:relative;
    height:11em;
}
a img{
    position: absolute:
    top:0;
    bottom:0;
    margin-top:auto;
    margin-bottom:auto;
}

or

.my-a-class {
    position:relative;
    height:11em;
}
.my-a-class .my-img-class{
    position: absolute:
    top:0;
    bottom:0;
    margin-top:auto;
    margin-bottom:auto;
}

Upvotes: 1

Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

Set for a img{vertical-align:middle;} or .my-img-class{vertical-align:middle;} It should work.

Upvotes: 1

Related Questions