471,582 Members | 1,468 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,582 software developers and data experts.

Vertically align div?

219 100+
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?

Expand|Select|Wrap|Line Numbers
  1. <div id="titleContainer">
  2.          <div id="titleLeft"><img src="images/title.gif"></div>
  3.          <div id="titleRight"><img src="images/code_grey.gif"></div>
  4.          <h4>The Big Picture</h4>
  5.          <div class="clear"></div>
  6. </div>
  7.  
Expand|Select|Wrap|Line Numbers
  1. .clear{
  2.    clear:both;
  3. }
  4.  
  5. #titleContainer{
  6.     border-bottom:1px solid #CCC;
  7. }
  8. #titleContainer h4{
  9.   text-align:center;
  10.     font-size:14px;
  11.     font-style:italic;
  12.     color:#666;
  13.     float:left;
  14.     width:50%;
  15. }
  16.  
  17. #titleLeft{
  18.   float:left;
  19.     width:25%;
  20. }
  21. #titleRight{
  22.   float:right;
  23. }
  24.  
Oct 9 '07 #1
5 3111
drhowarddrfine
7,435 Expert 4TB
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?
Oct 9 '07 #2
dmorand
219 100+
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.
Oct 9 '07 #3
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?

Expand|Select|Wrap|Line Numbers
  1. <div id="titleContainer">
  2.          <div id="titleLeft"><img src="images/title.gif"></div>
  3.          <div id="titleRight"><img src="images/code_grey.gif"></div>
  4.          <h4>The Big Picture</h4>
  5.          <div class="clear"></div>
  6. </div>
  7.  
Expand|Select|Wrap|Line Numbers
  1. .clear{
  2.    clear:both;
  3. }
  4.  
  5. #titleContainer{
  6.     border-bottom:1px solid #CCC;
  7. }
  8. #titleContainer h4{
  9.   text-align:center;
  10.     font-size:14px;
  11.     font-style:italic;
  12.     color:#666;
  13.     float:left;
  14.     width:50%;
  15. }
  16.  
  17. #titleLeft{
  18.   float:left;
  19.     width:25%;
  20. }
  21. #titleRight{
  22.   float:right;
  23. }
  24.  
if titleContainer is the div you want center aligned just do this:
Expand|Select|Wrap|Line Numbers
  1. #titleContainer {
  2. margin-left: auto;
  3. margin-right: auto;
  4. }
Oct 10 '07 #4
dmorand
219 100+
if titleContainer is the div you want center aligned just do this:
Expand|Select|Wrap|Line Numbers
  1. #titleContainer {
  2. margin-left: auto;
  3. margin-right: auto;
  4. }
I'm looking to have the h4 within the titleContainer vertically aligned.
Oct 10 '07 #5
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:
Expand|Select|Wrap|Line Numbers
  1. line-height: 500px;
I am not 100% certain it will work in your case but it has worked for me before
Oct 10 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

19 posts views Thread by George Ziniewicz | last post: by
5 posts views Thread by Poonam | last post: by
27 posts views Thread by FL | last post: by
10 posts views Thread by Unknown User | last post: by
reply views Thread by pamelafluente | last post: by
4 posts views Thread by Greg Scharlemann | last post: by
reply views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by lumer26 | last post: by
reply views Thread by Vinnie | last post: by
1 post views Thread by lumer26 | last post: by
reply views Thread by lumer26 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.