2

我想创建一个包含按钮的菜单，但由于某种原因，按钮没有在 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>

我在这里想念什么？

4

2 回答 2

2

尝试将此 CSS 用于按钮

.ButtonClass
{
 border: thin groove #000000;
 vertical-align: bottom;
 }

如果您正在寻找 div 内的对齐方式。您可以使用position:absolute;绝对定位父 div 中的元素。使用时position:absolute;，元素将从第一个定位的父 div 绝对定位，如果找不到，它将从窗口绝对定位，因此您需要确保内容 div 相对定位。

所以添加position:relative;到内容 div，从按钮中删除浮动并添加以下 css：

position: absolute;
right:    0;
bottom:   0;
于 2013-01-02T07:39:46.827 回答
1

垂直对齐仅适用于表格单元格1：

.Menu
{
    display: table-cell;
}

1实际上它也适用于内联块，但效果不同。

于 2013-01-02T07:36:15.630 回答