Wie kann ich etwas innerhalb eines Span-Tags vertikal ausrichten?

Wie kann ich erreichen, dass das "x" in der Mitte der Spanne vertikal ausgerichtet wird?

.foo {
    height: 50px;
    border: solid black 1px;
    display: inline-block;
    vertical-align: middle;
}

<span class="foo">
   x
</span>

Verwenden Sie line-height:50px;anstelle der Höhe. Das sollte den Trick machen;)

Beachten Sie, dass der line-heightAnsatz fehlschlägt, wenn Sie einen langen Satz in spander Zeile haben, der die Linie durchbricht, weil nicht genügend Platz vorhanden ist. In diesem Fall hätten Sie zwei Zeilen mit einer Lücke mit der Höhe der in der Eigenschaft angegebenen N Pixel.

Ich habe mich daran gehalten, als ich ein Bild mit vertikal zentriertem Text auf der rechten Seite anzeigen wollte, das in einer reaktionsschnellen Webanwendung funktioniert. Als Basis verwende ich den von Eric Nickus und Felipe Tadeo vorgeschlagenen Ansatz.

Wenn Sie erreichen wollen:

und das:

.container {
    background: url( "https://i.imgur.com/tAlPtC4.jpg" ) no-repeat;
    display: inline-block;
    background-size: 40px 40px; /* image's size */
    height: 40px; /* image's height */
    padding-left: 50px; /* image's width plus 10 px (margin between text and image) */
}

.container span {
    height: 40px; /* image's height */
    display: table-cell;
    vertical-align: middle;
}

<span class="container">
    <span>This is a centered sentence next to an image</span>
</span>

Dies ist der einfachste Weg, wenn Sie mehrere Zeilen benötigen. Wickeln Sie Ihren spanText in einen anderen ein spanund geben Sie dessen Höhe mit an line-height. Der Trick , um mehrere Zeilen wird das Zurücksetzen der inneren span‚s line-height.

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle {
    line-height: /*set height*/;
}

.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /*set line height back to normal*/
}

DEMO

Natürlich spankönnte das Äußere ein divoder was auch immer sein

Der Flexbox-Weg:

.foo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

Ich brauchte dies für Links, also habe ich den Bereich mit einem a-Tag und einem div umbrochen und dann den Bereich selbst zentriert

HTML

<div>
    <a class="tester" href="#">
        <span>Home</span>
    </a>
</div>

CSS

.tester{
    display: inline-block;
    width: 9em;
    height: 3em;
    text-align: center;
}
.tester>span{
    position: relative;
    top: 25%;
}

CSS vertikales zentrales Bild und Text

Ich habe eine Demo für vertikale Bildmitte und Text erstellt und ich habe auch Test auf Firefox, Chrome, Safari, Internet Explorer 9 und 8.

Es ist sehr kurz und einfach CSS und HTML. Bitte überprüfen Sie den folgenden Code und Sie können die Ausgabe auf Screenshort finden.

HTML

<div class="frame">
    <img src="capabilities_icon1.png" alt="" />
</div>

CSS

  .frame {
        height: 160px;      
        width: 160px;
        border: 1px solid red;
        white-space: nowrap;
        text-align: center; margin: 1em 0;
    }

    .frame::before {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        content:"";
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
    }

Ausgabe Geben Sie hier die Bildbeschreibung ein

das funktioniert bei mir (Keltex sagte dasselbe)

.foo {
height: 50px;
...
}
.foo span{
vertical-align: middle; 
}

<span class="foo"> <span>middle!</span></span>

Das vertikal ausgerichtete CSS-Attribut macht leider nicht das, was Sie erwarten. In diesem Artikel werden zwei Möglichkeiten zum vertikalen Ausrichten eines Elements mithilfe von CSS erläutert.

Stellen Sie padding-top als geeigneten Wert ein, um das x nach unten zu drücken, und subtrahieren Sie dann den Wert, den Sie für padding-top haben, von der Höhe.