Centering Text and images within a DIV, and more.

Question

So i have a couple of tag, and i have some text and images i'd like to center or align to the bottom inside of them. Vertical-align doesn't seem to be in the mood to work.

I'd also like to make a horizontal menu, which will have a start image (say, menutop.png), a filler (menubg.png) and a closing block (menubottom.png), and i'd like for the bottom closing block to automatically place itself at the end of the menu, no matter how long it happens to be.

Thanks!

Answer 1

This calls for absolute positioning in CSS. First you need to give the parent DIV a position value (relative or static at least).

Then, the images and text you want to align to the bottom you need to make position: absolute, and bottom: 0px.

The horizontal menu should be 100% width (display: block also works), and the closing block placed inside. Absolutely position the closing block, and give it "right: 0" so it is always to the right.

Answer 2

I solved it like this:

<div id="menu">
<img src="img/menutop.png" />
    <div id="menucontent">
stuff goes here 
    </div>
<img src="img/menubottom.png"  />
</div>

CSS:

#menu
{
width: 335px;
height: 100%;
float: right;
border:solid black 1px;
}
#menucontent
{
background:url(img/menubg.png) repeat-y;
width: 100%;
}

Thanks for the pointers though :)

Answer 3

Try this with the element you want to center something else within:

div {
  display: table-cell;
  vertical-align: center;
}

(Not sure if this works in every browser, but I'm fairly sure it does in Firefox and IE8 at least)