Making a Input Text Field Be On The Right Side Of a Image

I have a 50x50 image and an <input type="text" /> field that I want to be on the right side of the image. I've tried this:

<img src="missing-image.png" />
<div name="image_input">
    <input type=开发者_运维问答"text" />
</div>

And with this CSS:

#image_input {
    position: absolute;
    top: 10px;
}

But the text input won't go to the right side of the image. Also as you can see I want it to be centralized with the height of the image and as I can see it won't work too. How I can correct this?

PS: All that is inside a <form>

Position absolute gives you more control:

HTML

<div name="image_input">
    <img src="missing-image.png" />
    <input type="text" />
</div>

CSS

div {
    position:relative;
}

input{
    position:absolute;
    right:10px;
    bottom:20px;
}

Try this:

<div id="image_input">
    <img src="missing-image.png" />
    <input type="text" />
</div>

and the CSS:

#image_input img {
  float: left;
  clear: none;
}

Note that I changed the div's "name" attribute to an "id" attribute.

there are a couple of ways to center align text next to an image. you can put it in a list and make the image the list style type. The other thing you can do it properly pad the element to center align it.

Try changing to this:

<div name="image_input">
    <img src="missing-image.png" />
    <input type="text" />
</div>

And the CSS:

.img {
    display: inline-block;
}

To center the height, you might want to use one of the vertical-align options on the input tag.

such as:

input {
    vertical-align: middle;
}

I don't use vertical-align very much, so you might have to tweak it a little to get it to work, but see here: http://www.w3schools.com/css/pr_pos_vertical-align.asp