Vertical Align auf den button wird nicht funktionieren

Ich möchte ein Menü erstellen, die Schaltflächen, in der es aber aus irgendeinem Grund die Tasten nicht ausgerichtet auf der Unterseite der div. Ich habe dies getan, bevor auf die gleiche Weise mit Tabellen und dann hat es geklappt aber jetzt bin ich versucht ohne den Tischen und aus irgendeinem Grund funktioniert das nicht.

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

}

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

was vermisse ich hier?

versuchen vertical-align im div nicht im Menü.
Ich habe es ausprobiert, es hat nicht funktioniert:(

InformationsquelleAutor ThunD3eR | 2013-01-02

  1. 2

    Versuchen Sie es Mit diesem CSS für den button

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

    Und wenn Sie auf der Suche für die Ausrichtung innen div.Sie können position:absolute; absolut position eines Elements innerhalb eines übergeordneten div.
    Bei der Verwendung von position:absolute; wird das element absolut positioniert werden von der ersten positioniert parent-div, wenn Sie nicht finden können, es wird die position absolut aus dem Fenster, so dass Sie brauchen, um stellen Sie sicher, dass das content-div ist relativ positioniert.

    So fügen Sie position:relative; zu den content-div, entfernen Sie den Schwimmer aus der Schaltfläche und fügen Sie den folgenden css:

    position: absolute;
right:    0;
bottom:   0;
    Dies funktionierte perfekt, werde Lesen, auf das position-Attribut! danke!
    Ich fand ein kleines problem hier. Wenn ich mehrere buttons bekommen Sie gestapelt auf einander. Ich habe versucht dies zu lösen, durch die Einstellung der margin 0 5px, aber es scheint nicht zu funktionieren
    funktioniert Super. danke für die Antwort.

    InformationsquelleAutor Milind Anantwar

  2. 1

    Vertical align funktioniert nur für Tabellen-Zellen1:

    .Menu
{
    display: table-cell;
}

    1 Tatsächlich funktioniert es auch für inline-Blöcke, aber mit unterschiedlicher Wirkung.

    Wie kann ich die Ausrichtung der buttons in einem div dann?
    Verwenden Sie den code aus meiner Antwort.
    dieser Antwort richtig ist , sehen Sie hier die jsfiddle.net/nucC8
    Dank dieser arbeitete ebenfalls! ich nahm die andere Antwort, da ich versuche zu vermeiden, mit irgend etwas zu tun hat mit Tabellen.

    InformationsquelleAutor Pavlo

Schreibe einen Kommentar