wie lassen vertical-align middle Arbeit mit display inline-block

html

<ul class="tabs-bottom">
<li><a href="#tab-1">Booking</a></li>
<li><a href="#tab-2">Special Offers</a></li>
</ul>

css

.tabs-bottom{
    list-style: none;
    margin: 0;
    padding: 0;
}
.tabs-bottom li{
    width: 216px;
    height: 55px;
    background: #000;
    display: inline-block;
    text-align: center;
}

demo

Können Sie erläutern, ein wenig über das, was du versuchst, um vertikal ausrichten? Der text in dem tab?
ja, der text innerhalb Der Registerkarte.
Nicht arbeiten kann. Verwenden müssen display:table-cell; jsfiddle.net/VxnS5/1
Ja, ich kann das mit display: table-cell aber ich bin auf der Suche nach inline-block
Sie werden nicht erhalten, es zu tun, es einfach mit inline-block. Sie müssen verwenden Sie Tabelle-Zelle zu bekommen, jedes einzelne Element vertikal zentrieren. Sie können inline-block vertikal zentrieren Sie die Blöcke selbst, sondern der text selbst muss zentriert über die Tabelle-Zelle.

InformationsquelleAutor Bhojendra Rauniyar | 2013-07-25

  1. 2

    Kann ich dies tun mit display table-cell aber ich Suche dringend für mit display inline-block

    hier funktioniert die demo mit display table-cell demo

    .tabs-bottom{
    list-style: none;
    margin: 0;
    padding: 0;
    border-spacing: 10px 0;
}
.tabs-bottom li{
    width: 216px;
    height: 55px;
    background: #000;
    display: table-cell;
    text-align: center;
    vertical-align: middle;

}

    InformationsquelleAutor Bhojendra Rauniyar

  2. 0

    Wenn Sie ok mit anderen display-Eigenschaft verwenden, können Sie diaplsy:table-cell wie diese

    .tabs-bottom li{
    width: 216px;
    height: 55px;
    background: #000;
    display: table-cell;
    text-align: center;
    vertical-align:middle;
}

    InformationsquelleAutor Kalpesh Patel

  3. 0

    Dies ist die komplette css-Sie brauchen, um es zu arbeiten.
    Dieser übernimmt auch sehr lange Texte, die wrap-around - (multi-line link-Texte):

    .tabs-bottom{
    list-style: none;
    margin: 0;
    padding: 0;
}
.tabs-bottom li{
    width: 216px;
    height: 55px;
    line-height: 50px;
    background: #000;
    display: inline-block;
    text-align: center;
}

.tabs-bottom li a
{
    line-height:16px; /*This is in place, to prevent inheriting the li's line-height*/
    display:inline-block;
    vertical-align: middle;
}

    Können Sie es testen, in diesem fiddle:

    http://jsfiddle.net/vVnR5/

    Bemerken

    jsFiddle scheint nicht zu funktionieren im IE 7 und 8, so konnte ich nicht testen.

    Sie haben auch setzen line-height.
    Ja, in der Tat, das benötigt wird.

    InformationsquelleAutor beerwin

  4. -1

    Wenn Sie nur jemals eine Zeile, können Sie center mit line-height,

    .tabs-bottom li{
    width: 216px;
    height: 55px;
    line-height:55px
    background: #000;
    display: inline-block;
    text-align: center;
}

    Es ist schwieriger, wenn Sie möchten, eine multi-line center, aber es erreicht werden kann, mit display:table-cell;

    BEARBEITEN Hier ist eine version, wo es in den Mittelpunkt stellen wird unabhängig von der Anzahl der Zeilen http://codepen.io/robsterlini/pen/btqjv aber denken Sie daran, dass es standardmäßig wieder zum erscheinen an der Spitze für IE7 und unten (siehe hier).

    Höhe kann unbekannt sein, so muss ich-display mit vertical-align middle

    InformationsquelleAutor Rob Sterlini

Schreibe einen Kommentar