CODEWITHSUNDEEP
cssalignmentvertical-alignment
theGame
theGame

Reputation: 393

fields alignment problem Css

Hey this is my problem, i can not align tis input field with these images, they are in a div, i will paste the code below Image Of fields

So what do you suggest should i do, stuck with this problem, need a quick answer plz

<div style="margin-bottom: 5px;"> 

 <input type="text" id="queryInput" value="pizza" style="width: 180px; height:30px;border: 1px solid #d3d6d9;padding: 4px 10px 2px 10px;background-color: white;-moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;border-radius: 5px;  font-size: 12px;   font-family: Droid Sans, Arial, sans-serif;"/> 
 <a href="javascript:doSearch()"><img src="img/search.png" /></a> &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 <a href="javascript:toggleStreetView()"><img src="img/street.png" /></a>
 <a href="javascript:toggleGoogleView()"><img src="img/google.png" /></a>

</div>

Upvotes: 0

Views: 95

Answers (5)

Neil McGuigan
Neil McGuigan

Reputation: 48267

  1. try to avoid inline styles, yes?

  2. vertically center the images, and they will align w the textbox:

    < style> div img { vertical-align:middle; } < / style>

http://jsfiddle.net/mSgVg/

Upvotes: 0

AlexC
AlexC

Reputation: 9661

 div input, div a{
    display:inline-block;
    vertical-align:top;
    float:none;
    margin:0px;
    .display:inline;
    .zoom:1;
}

Upvotes: 0

Saeed Neamati
Saeed Neamati

Reputation: 35852

Generally, to align boxes vertically, one of the best methods are to make'em all block box (so they can accept width and height), then set the height of all of them to the highest box, then try to vertical-align contents in each box. In your special case, the height of search box is 30px. But as @Jawad said, you should include the CSS of the parent div, with CSS of other elements, so that we can help.

Upvotes: 0

Jawad
Jawad

Reputation: 6672

Try this

http://jsfiddle.net/K8rHG/

Upvotes: 1

Joe
Joe

Reputation: 82634

css:

#queryInput {
    margin-top: -10px;
    float: left;
}

Upvotes: 0

Related Questions