Vertikale Ausrichtung in der Mitte eines Inline-Block-Anchor-Tags

Question

Ich möchte, dass meine Links und Schaltflächen gleich aussehen, aber ich konnte den Text innerhalb eines "a" -Tags nicht auf die gleiche Weise ausrichten wie der "Knopf" -Tag. Es ist wichtig zu beachten, dass die Tags in der Lage sein müssen, mehrere Textzeilen zu verarbeiten (so dass die Zeilenhöhe nicht funktioniert).

a,button { 
    display: inline-block; 
    -moz-box-sizing: border-box; 
    width: 150px; 
    height: 150px; 
    vertical-align: middle; 
    border: 1px solid #000; 
    text-align: center; 
} 

Siehe jsfiddle unter:

http://jsfiddle.net/bZsaw/3/

Wie Sie sehen können, ich kann es mit einer Kombination aus einem span-Tag innen und Einstellung zur Arbeit "display: table", um die "a" und Einstellung "display: table-cell" und "vertical-align: middle" zur Spanne, aber das funktioniert nicht in IE7.

a,button { 
    width: 150px; 
    height: 150px; 
    border: 1px solid #000; 
    text-align: center; 
} 

a { 
    display: table; 
    -moz-box-sizing: border-box; 
} 

a span, button span { 
    vertical-align: middle; 
    text-align: center; 
} 

a span { 
    display: table-cell; 
} 

Auf der Suche nach einer einfachen CSS-Lösung.

Answer 1

Die einzige zuverlässige Art und Weise ich align Text vertikal gefunden habe und Verpackung des Textes ermöglichen, wenn sie zu lang ist mit einem 2-Behälter-Ansatz.

Der Außencontainer sollte eine Linienhöhe haben, die mindestens doppelt so hoch ist wie die des Innencontainers. In Ihrem Fall bedeutet, dass die folgenden:

a { 
    width: 150px; 
    height: 150px; 
    border: 1px solid #000; 
    text-align: center; 
    line-height: 150px; 
    display: block; 
} 

a span { 
    display:inline; 
    display:inline-table; 
    display:inline-block; 
    vertical-align:middle; 
    line-height: 20px; 
    *margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight)/2) + "px" : "0"); 
} 

float hinzufügen auf der einen Tag nach links, wenn Sie alles Inline wollen. Hier ist das aktualisierte Beispiel mit Langtext in dem A-Tag zu .. http://jsfiddle.net/bZsaw/13/

Sie die Zeilenhöhe auf der Spanne eingestellt werden, was auch immer Sie mögen und wenn es weniger als die Hälfte der Zeilenhöhe der Mutter ist, wird es center AND erlaubt Textumbruch, wenn Ihr Text die Größe des übergeordneten Containers überschreitet. Dies funktioniert bei allen modernen Browsern, soweit ich weiß.

Answer 2

Wenn Ihr Text nicht größer als die Breite der Box ist, können Sie die Zeilenhöhe gleich der Höhe der Box einstellen.

line-height:150px;

Answer 3

Verwendenline-height:150px; und display-inline:block;