473,246 Members | 1,587 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,246 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 3128
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

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

Similar topics

19
by: George Ziniewicz | last post by:
.. I try to use CSS when possible, though I am still learning and don't maximize its use. In particular, I still use a table to provide for a centered image in a few slideshows (though table...
5
by: Poonam | last post by:
Hi Can we align an image or content vertically middle in a DIV. tks poonam
27
by: FL | last post by:
Hi Everyone, I know howto center a block using margin-left: auto ; margin-right: auto ; but I'm trying to center vertically a box, any idea to solve this?
10
by: john T | last post by:
Is there anyway to vertically center a html table using css in such a way it does not alter the html table. When I tryied it just screws up.
10
by: Unknown User | last post by:
Yet another question about vertical centering: How can I center a page vertically? I have searched on Google and didn't find anything that works at least on IE, Opera and Mozilla:...
0
by: pamelafluente | last post by:
Hello experts, I need some help to do in a proper way what I am doing. I have some "cells" in a web page. Each "cell" is made of 2 DIV. One is inside the other. Example with 2 "cells" : <div...
4
by: avi | last post by:
Hello, I am trying to vertically center text in a background image, I found a solution on this site that sets the line-height to the height of the background image. This works just fine, except...
4
by: Greg Scharlemann | last post by:
I'm having difficulty getting the radio buttons to align vertically with one another and the header (1 2 3 4 5) at the top. Ideally each radio button will be directly below the one above it and...
6
by: spamguy | last post by:
First off, this is my first post, though TheScripts has solved gazillions of my C/PHP/SQL/HTML problems for years.You guys rock! That said, consider the table cell <td> <!--Adding 'height=100'...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

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.