我想创建一个包含按钮的菜单，但由于某种原因，按钮没有在 div 的底部对齐。我之前已经使用表格以相同的方式完成了此操作，然后它起作用了，但现在我尝试不使用表格，并且由于某种原因这不起作用。
我的CSS:
body
{
background: #bbb url(../images/Mywallpap.jpg) no-repeat;
font-family: Sans-Serif;
padding:0;
margin: 0;
}
#Background
{
width: 750px;
margin: 0 auto;
background: #FEFEFE;
}
.Menu
{
height: 60px;
vertical-align: bottom;
}
.Menu div
{
height : 30px;
margin-left: 25px;
padding: 0;
}
我的html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="MyCss.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<div id="Background">
<div class="Menu">
<div>
<button>Test</button>
</div>
</div>
</div>
</body>
</html>
我在这里缺少什么？
最佳答案
尝试使用此 CSS 按钮
.ButtonClass
{
border: thin groove #000000;
vertical-align: bottom;
}
如果您正在寻找 div 内部的对齐方式。您可以使用 position:absolute; 在父 div 中绝对定位元素。
使用 position:absolute; 时，元素将从第一个定位的父 div 绝对定位，如果找不到，它将从窗口绝对定位，因此您需要确保内容 div相对定位。
因此，将 position:relative; 添加到内容 div，从按钮中删除 float 并添加以下 css:
position: absolute;
right: 0;
bottom: 0;
关于css - 垂直对齐按钮不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14118386/