...

View Full Version : Aligning elements within a div - strange behaviour



webguy08
07-24-2012, 04:19 AM
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?

sean3838
07-24-2012, 04:59 AM
Wrap it in a div give it the desired width and use margin: 0 auto;

webguy08
07-24-2012, 04:19 PM
Do you mean: create a child div of "sContainer" that within it has the input and image element?

COBOLdinosaur
07-24-2012, 06:38 PM
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.

webguy08
07-24-2012, 07:17 PM
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:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum