How to make this HTML object in a middle and one line? - html

Question

Here you can see the problem: http://jsfiddle.net/kAQrX/1/
I want the magnifier, search text and search box (input) to display in one line, and in a middle of the #search div.
I'm out of ideas now.

Answer 1

Use the css background-image property and a left padding, instead of an image tag! :)
E.g.
.search_content {
background: url('http://www.iconeasy.com/icon/thumbnails/System/WebGloss%203D/Magnifier%20Icon.jpg') no-repeat;
padding-left: 55px;
}
JSFiddle

Answer 2

Try This :
.magnifier {
width: 35px;
height: 35px;
margin: 3px;
float:left; //<----
}
See Feedle http://jsfiddle.net/kAQrX/2/

Answer 3

You can display it inline, or as inline-block. See this fiddle

Answer 4

there you go:
HTML:
<div id="search">
<div class="search_content">
<span class="search_text">SEARCH:</span>
<input type="text" name="query" class="search_box">
<img src="http://www.iconeasy.com/icon/thumbnails/System/WebGloss%203D/Magnifier%20Icon.jpg" class="magnifier">
</div>
</div>
CSS:
#search {
background: url("images/search.png") no-repeat;
width: 382px;
height: 41px;
margin-right: 10px;
float: right;
}
.magnifier {
width: 35px;
height: 35px;
margin: 3px;
vertical-align:middle;
}
.search_text {
margin-left: 3px;
text-shadow: 0px 0 black, 0 1px black, 1px 0 black, 0 1px black;
color: #FFF;
font-weight: bold;
}
.search_box {
width: 162px;
height: 33px;
padding: 0px 12px 2px 10px;
}
.searchbox_content {
margin-top: 10px;
}

Answer 5

You can add the following:
.searchbox_content {
display: inline;
}
to get the 3 elements in one line.
To get them into the center of #search you can add the text-align-Attribute:
#search {
text-align:center;
}