Vertical Align on button wont work

css vertical-alignment

15,002

Solution 1

Try Using this CSS for button

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

And if you are looking for alignment inside div.You can use position:absolute; to absolutely position an element within a parent div. When using position:absolute; the element will be positioned absolutely from the first positioned parent div, if it can't find one it will position absolutely from the window so you will need to make sure the content div is positioned relatively.

So add position:relative; to the content div, remove the float from the button and add the following css:

position: absolute;
right:    0;
bottom:   0;

Solution 2

Vertical align will work only for table cells¹:

.Menu
{
    display: table-cell;
}

¹ Actually it will also work for inline blocks, but with different effect.

15,002

Author by

ThunD3eR

By day: .net developer By night: .net developer For fun trying all possible technologies

Updated on June 04, 2022

Comments

ThunD3eR almost 2 years

I want to create a menu that has buttons in it but for some reason the buttons dont get aligned at the buttom of the div. I have done this before the same way using tables and then it worked but now im trying without the tables and for some reason this does not work.

my 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;

}

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

what am i missing here?