在DIV中居中文本和图像等

Question

所以我有一些标签，我有一些文字和图像我想要居中或对齐到它们内部的底部。垂直对齐似乎没有工作的心情。

我还想制作一个水平菜单，它有一个开始图像（例如，menutop.png），一个填充（menubg.png）和一个关闭块（menubottom.png），我想要无论事件发生多长时间，底部关闭块都会自动放置在菜单的末尾。

谢谢！

Answer 1

这要求在CSS中进行绝对定位。首先，您需要为父DIV提供一个位置值（至少相对或静态）。

然后，你想要对齐底部的图像和文字你需要做位置：绝对和底部：0px。

水平菜单应为100％宽度（显示：块也可以），并且关闭块放在里面。绝对定位关闭块，并将其设置为“右：0”，因此它总是在右边。

Answer 2

我解决了这个问题：

<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 3

尝试使用您希望将其他内容置于其中的元素：

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

（不确定这是否适用于所有浏览器，但我相信它至少可以在Firefox和IE8中使用）