Aligning elements within a div - strange behaviour

Hi,

I am trying to align an input element and an image within a div element (sContainer), such that they are centred horizontally and vertically. Unfortunately it doesn't seem to work. When I use float:left; in the CSS code it causes them to not be vertically centred, using vertical-align:middle; results in the two elements not being joined. Here is the code:

HTML:

<div class="center" id="header">

<div id="leftContainer"></div>

<div id="sContainer">
<input id="sBox" type="text" />
<img id="sButton" alt="Search" src="images/searchglass.jpg" />
</div>

<div id="rightContainer"></div>

</div>

CSS:

.center
{
clear:both;
margin-left:auto;
margin-right:auto;
width:960px;
}

#header
{
background-color:gray;
height:50px;
}

#rightContainer
{
background-color:red;
float:left;
width:200px;
}

#leftContainer
{
background-color:green;
float:left;
width:200px;
}

#sBox
{
border-bottom-color:black;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-color:black;
border-left-style:solid;
border-left-width:1px;
border-top-color:black;
border-top-style:solid;
border-top-width:1px;
height:18px;
padding:5px;
width:348px;
}

#sContainer
{
background-color:yellow;
float:left;
text-align:center;
width:560px;
}

#searchContainer > *
{
vertical-align:middle;
}


Anyone know a solution?

Wrap it in a div give it the desired width and use margin: 0 auto;

Do you mean: create a child div of "sContainer" that within it has the input and image element?

Input and image are very different elements and do not follow the same rules for alignment. You could try vertical-align:baseline, but in the end I expect you may have to use absolute position, and that would be just plain nasty.

Wrap it in a div give it the desired width and use margin: 0 auto;

Thank you. It's annoying that this solution worked because I tried this before - I think I forgot to specify the width. Regardless, I am happy, thanks again :thumbsup: