How to vertically center text in a div, overlapping another div - html

Question

I have a css problem. Im trying to vertically center the text in a div, which is overlaying another div, but the text won't budge.
EDIT: Here's teh JSFiddle url: http://jsfiddle.net/wgSEw/3/
The html is as follows:
<div id="footer-top">
<div id="footer-top-left">
<div id="footer-logo">
</div>
</div>
<div id="footer-top-transition"></div>
<div id="footer-top-right"></div>
<div id="footer-top-bullets">
<div id="site-map" class="footer-bullet">
<img src="<?php echo BASE_IMG_URL . 'bulletlight.png'; ?>" alt="some_text">
<span class="footer-bullet-text">Site Map</span>
</div>
<div id="report-issue" class="footer-bullet">
<img src=<?php echo BASE_IMG_URL . 'bulletlight.png'; ?> alt="some_text">
<span class="footer-bullet-text">Report an Issue</span>
</div>
<div id="submit-professor" class="footer-bullet">
<img src=<?php echo BASE_IMG_URL . 'bulletblack.png'; ?> alt="some_text">
<span class="footer-bullet-text">Submit Professor</span>
</div>
<div id="submit-school" class="footer-bullet">
<img src=<?php echo BASE_IMG_URL . 'bulletblack.png'; ?> alt="some_text">
<span class="footer-bullet-text">Submit a School</span>
</div>
</div>
</div>
and the current css is:
#footer-top{
position: relative;
width: 960px;
height: 63px;
float: left;
background-image:url('midtilefooter.png');
}
#footer-top-left{
width: 466px;
height: 63px;
float: left;
}
#footer-logo{
width: 265px;
height: 63px;
float: left;
background-image:url('leftlogo.png');
}
#footer-top-transition{
width: 27px;
height: 63px;
float: left;
background-image: url('midblacktransition.png');
}
#footer-top-right{
width: 467px;
height: 63px;
float: left;
background-color: black;
}
#footer-top-bullets{
position: absolute;
float: left;
width: 960px;
height: 63px;
margin-left: 265px;
}
.footer-bullet{
float: left;
height: 63px;
width: 173px;
color: white;
}
.footer-bullet-text{
height: 63px;
color: white;
top: 50%;
margin-top: -31px;
vertical-align: middle;
}
This essentially, creates a basic background for the top part of the footer, then overlays a div of bullets onto that background, so that it overlays without obscuring or messing with the background. The bullets are displaying in the correct places and, the text is correctly placed horizontally, but I can't get it to center vertically at all. Any help would be appreciated, as well as any general advice on css, Im pretty new to it, and it's giving me a run for my money. Thansk a lot!

Answer 1

to center a div vertical
html
<div id="parent">
<div id="child">Content here</div>
</div>
css option 1
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
We begin by positioning both parent and child divs. Next we set the
top and left values of the child to be 50% each, which would be the
center of the parent. However this sets the top left corner to be in
the center so we’re not done.
We need to move the child up (by half its height) and to the left (by
half its width) so it’s center is what sits in the center of the
parent element. This is why we need to know the height (and here the
width) of the child element.
To do that we give the element a negative top and left margin equal to
half its height and width.
Unlike the first 2 methods this one is meant for block level elements.
It does work in all browsers, however the content can outgrow its
container in which case it will disappear visually. It’ll work best
when you know the heights and widths of the elements.
css option 2
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
The idea with this method is to try to get the child element to
stretch to all 4 edges by setting the top, bottom, right, and left
vales to 0. Because our child element is smaller than our parent
elements it can’t reach all 4 edges.
Setting auto as the margin on all 4 sides however causes opposite
margins to be equal and displays our child div in the center of the
parent div.
Unfortunately the above won’t work in IE7 and below and like the
previous method the content inside the child div can grow too large
causing it to be hidden.
css option 3
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
In the css above I’ve set top and bottom paddings on both elements.
Setting it on the child will make sure the contents in the child will
be vertically centered and setting it on the parent ensures the entire
child is centered within the parent.
I’m using relative measurements to allow each div to grow dynamically.
If one of the elements or it’s content needs to be set with an
absolute measurement then you’ll need to do some math to make sure
things add up.
For example if the parent was 400px in height and the child 100px in
height we’d need 150px of padding on both the top and bottom.
150 + 150 + 100 = 400
Using % could throw things off in this case unless our % values
corresponded to exactly 150px.
This method works anywhere. The downside is that depending on the
specifics of your project you may need to do a little math. However if
you’re falling in line with the idea of developing flexible layouts
where your measurements are all relative you can avoid the math.
Note: This method works by setting paddings on the outer elements. You
can flip things and instead set equal margins on the inner elements. I
tend to use padding, but I’ve also used margins with success. Which
you choose would depend on the specifics of your project.
source