Vertically align div?

[dmorand]

I have a layout with 3 div's next to each other, but I want the middle div to be vertically aligned. What's the best way to achieve this?

[code=html]
<div id="titleContai ner">
<div id="titleLeft"> <img src="images/title.gif"></div>
<div id="titleRight" ><img src="images/code_grey.gif"> </div>
<h4>The Big Picture</h4>
<div class="clear"></div>
</div>
[/code]

[code=css]
.clear{
clear:both;
}

#titleContainer {
border-bottom:1px solid #CCC;
}
#titleContainer h4{
text-align:center;
font-size:14px;
font-style:italic;
color:#666;
float:left;
width:50%;
}

#titleLeft{
float:left;
width:25%;
}
#titleRight{
float:right;
}
[/code]

[drhowarddrfine]

Which div? The one at the bottom has no content. To fit something between the two divs now, just make it smaller than the two combined widths, which are 75% now.

Why do you wrap the images in div?

[dmorand]

Which div? The one at the bottom has no content. To fit something between the two divs now, just make it smaller than the two combined widths, which are 75% now.

Why do you wrap the images in div?

I'm sorry I typed that out wrong. There are div's on either side of the H4 tag. The h4 tag is in the middle. I should remove the div's and just use the img tag, but I was doing some testing with the div's and img's.

[FullyH3ktik]

I have a layout with 3 div's next to each other, but I want the middle div to be vertically aligned. What's the best way to achieve this?

[code=html]
<div id="titleContai ner">
<div id="titleLeft"> <img src="images/title.gif"></div>
<div id="titleRight" ><img src="images/code_grey.gif"> </div>
<h4>The Big Picture</h4>
<div class="clear"></div>
</div>
[/code]

[code=css]
.clear{
clear:both;
}

#titleContainer {
border-bottom:1px solid #CCC;
}
#titleContainer h4{
text-align:center;
font-size:14px;
font-style:italic;
color:#666;
float:left;
width:50%;
}

#titleLeft{
float:left;
width:25%;
}
#titleRight{
float:right;
}
[/code]

if titleContainer is the div you want center aligned just do this:
[CODE=css]
#titleContainer {
margin-left: auto;
margin-right: auto;
}[/CODE]

[dmorand]

if titleContainer is the div you want center aligned just do this:
[CODE=css]
#titleContainer {
margin-left: auto;
margin-right: auto;
}[/CODE]

I'm looking to have the h4 within the titleContainer vertically aligned.

[FullyH3ktik]

if it is only one line of text you could use line height, you set the line height the same amount of pixels high as you do with the div so say the div is 500px high, you would add this to the styling of h4:
[CODE=css]line-height: 500px;[/CODE]
I am not 100% certain it will work in your case but it has worked for me before