CODEWITHSUNDEEP
htmlcssinputalignment
LostPhysx
LostPhysx

Reputation: 3641

How to align an image at the middle of a input field?

I want to align a small image ao it is at the vertical middle of a textbox without using tables. Icurrently have this piece of code: 

<input type="text" style="border-color: #FF0000; border-radius: 10px; height: 40px; width: 35%; font-size: 30px; padding-left: 5px; padding-right: 5px;" placeholder="Name" name="name"/>
<img src="http://surfcamp.infinibrain.net/images/error.png" style="height: 32px; width: 32px; margin-left: 5px;" /><br/>

JSFiddle

As you can see the image sticks to the top of the textbox. I also tried adding vertical-align: middle; to the img.

Upvotes: 0

Views: 1117

Answers (3)

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

Is this what you wanted to achieve ?

Fiddle

<div class="lol">
    <input type="text" style="border-color: #FF0000; border-radius: 10px; height: 40px; width: 35%; font-size: 30px; padding-left: 5px; padding-right: 5px;" placeholder="Name" name="name" />
    <img src="http://surfcamp.infinibrain.net/images/error.png" style="height: 32px; width: 32px;" />
</div>
<br/><br/><br/><br/>
<div class="lol">
    <textarea></textarea>
    <img src="http://surfcamp.infinibrain.net/images/error.png" style="height: 32px; width: 32px;" />
</div>

.lol {
    display:inline-block;
    position:relative;
}
.lol img {
    position:absolute;
    top:50%;
    right:7px;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
}
.lol input {
    padding-right:40px !Important;
    width:200px !Important;
}
.lol textarea{
    padding-right:40px;
    min-height:30px;
}

Update For textareas, nothing special is required. I do have an update though. You should display the wrapper div as inline-block

Upvotes: 2

Ducane
Ducane

Reputation: 129

Encapsulate your input and image either into a div or td if you have, then add vertical-align: middle to img:

 <div>
    <input type="text" style="border-color: #FF0000; border-radius: 10px; height: 40px; width:     35%; font-size: 30px; padding-left: 5px; padding-right: 5px;" placeholder="Name" name="name"/>
    <img src="http://surfcamp.infinibrain.net/images/error.png" style="height: 32px; width: 32px; margin-left: 5px; vertical-align: middle;" /><br/>
</div>

Upvotes: 1

Kevin Cittadini
Kevin Cittadini

Reputation: 1469

There are well.. a number of ways to accomplish what you want to do. I'll tell you two ways to do that. Remember that there's not a "must" in these situations. You've have to choose (not necessarily one of those i'm telling you) the way that best suits your needs (layout needs, etc)

Relative Positioning

http://jsfiddle.net/nBMMJ/4/

Giving an element position:relative and setting a value to it's top property may give you a nice result.

Vertical Align Bottom

http://jsfiddle.net/nBMMJ/6/

To align an image you can use vertical-align:bottom. In this case, to help centering, I used the margin-bottom.

Upvotes: 1

Related Questions