Question

I have tried in vain to align my submit button to one entry of a form. I simply want the submit button to be positioned slightly to the right and centre of the form box. Presently, it is to the right but a little to the bottom of the box.

I have tried all of the different responses in answer to similar queries regarding aligning submit buttons (float, margin etc.), but for the life of me I cannot find the right option!

My HTML looks like this:

<input name="query" id="querybox" style="width:400px;height:40px;font-size:26px;border-radius:15px;border=0;">
        </input>

    <input type="button" value="Search" id="search" style="width:100px;height=40px;font-size=20px;"/>

The CSS to style the button looks like this:

    #search {
cursor:pointer; 
    width:70px; 
    height: 31px; 
    line-height:0; 
    font-size:0; 
    text-indent:-999px;
    color: transparent;  
    background: url(ico-search.png) no-repeat #151B54 center; 
    border: 1px solid #FFFFFF; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
}

#submit:hover {
    background: url(ico-search.png) no-repeat center #151B54; 
    border: 1px solid #FFFFFF;

    }

Any help much appreciated!! Thanks.

Answer 1

Wrap your inputs each in a div like so

<div class="vertAlign">
    <input name="query" id="querybox" style="width:400px;height:40px;font-size:26px;border-radius:15px;border=0;"></input>
</div>

<div class="vertAlign"> 
    <input type="button" value="Search" id="search" style="width:100px;height=40px;font-size=20px;"/>
</div>​

Then apply this css

.vertAlign{
    display: inline-block;
    vertical-align:middle;
}​

Here is a fiddle with the result

note: all of your css should be fine as is. I omitted it in my fiddle so that the solution would be more readable.