Question

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

我在这里缺少什么？

Answer 1

尝试使用此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;

Answer 2

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

.Menu
{
    display: table-cell;
}

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

垂直对齐按钮不会工作

2 个答案: