CODEWITHSUNDEEP
cssvertical-alignmenthtml
Stefan Kendall
Stefan Kendall

Reputation: 67892

Centering an image with an input?

I have an image next to an input, and I was wondering how I centered both with one another. I need the center of the image to be vertically aligned with the center of the input. How do I make this happen?

Markup:

<span class="my-span">
  <input type="text" .../><a href="..."><img .../></a>
</span>

Upvotes: 1

Views: 6322

Answers (3)

Alex Pokislyuk
Alex Pokislyuk

Reputation: 212

Setting vertical-align on both input and img elements works for me:

<span class="my-span">
   <input type="text" style="vertical-align: middle" /><a href="..." ><img style="vertical-align: middle" ... /></a>
</span>

Check it here

Upvotes: 0

Dexter Huinda
Dexter Huinda

Reputation: 1222

Your image should have the ff styles to work:

img { vertical-align: middle; display: table-cell; }

and to your input element, add 

input { float: left; }

Upvotes: 0

Pat
Pat

Reputation: 25685

Setting the vertical-align to middle on the <img> should put you in business:

<span class="my-span">
    <input type="text" .../><a href="..."><img ... style="vertical-align: middle"/></a>
</span>

You can see it in action here.

Upvotes: 4

Related Questions