Центрирование текста и изображений в DIV и многое другое

Question

Итак, у меня есть пара тегов, и у меня есть текст и изображения, которые я бы хотел центрировать или выровнять по нижней части внутри них. Вертикальное выравнивание, похоже, не в настроении работать.

Я также хотел бы создать горизонтальное меню, которое будет иметь начальное изображение (скажем, menutop.png), заполнитель (menubg.png) и закрывающий блок (menubottom.png), и я хотел бы чтобы нижний закрывающий блок автоматически помещался в конец меню, независимо от того, как долго это происходит.

Спасибо!

Answer 1

Я решил это так:

<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%;
}

Спасибо за указатели, хотя:)

Answer 2

Попробуйте это с элементом, в котором вы хотите центрировать что-то еще внутри:

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

(Не уверен, что это работает в каждом браузере, но я вполне уверен, что это работает в Firefox и IE8 по крайней мере)

Answer 3

Это требует абсолютного позиционирования в CSS. Сначала вам нужно дать родительскому DIV значение позиции (как минимум, относительное или статическое).

Затем, изображения и текст, который вы хотите выровнять по низу, необходимо расположить: абсолютное и нижнее: 0 пикселей.

Горизонтальное меню должно иметь ширину 100% (отображение: блок также работает), а закрывающий блок размещен внутри. Абсолютно расположите закрывающий блок и задайте для него «право: 0», чтобы оно всегда было справа.