Kann es nicht schaffen, Elemente zu positionieren

Question

Ich habe ein Spann -Tag, das ein IMG -Tag und ein weiteres Spann -Tag enthält. Ich möchte, dass das innere Spannwechsel -Tag nach links ausgerichtet ist und das IMG -Tag zentral ausgerichtet ist. Ich möchte, dass beide Tags vertikal in der Mitte ausgerichtet sind, und ich kann das nicht richtig machen ...

So sieht es aus (es ist blau, weil das Außenspann -Tag in Firebug markiert ist, um zu zeigen, dass es die gesamte Oberfläche dehnt):

Wie Sie im Bild sehen können, sind beide Tags zentriert und sie sind auch im Oberteil des Containers ausgerichtet. Ich möchte keines davon.

Dies ist das Markup:

Dies ist das aktuelle CSS der Tags:

.v-button-wrap {
    height: 100%;
    display: block;
    padding: 6px 15px 0 9px;
    vertical-align: middle;
    line-height: normal;
    text-align: center;
}

.v-icon {
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    line-height: normal;
    text-align: center;
}

.v-button-caption {
    text-align: left;
    line-height: normal;
    vertical-align: middle;
}

Ich habe die CSS ausgelassen, die für mein Problem, die Farben, die Schriftarten und dergleichen nicht relevant sind. Unnötig zu erwähnen, dass ich bei CSS kein Ass bin. Und ich habe mehrere Anleitungen nachgeschlagen, die das Problem behandeln, aber ich habe es nur geschafft, Beispiele zu finden, bei denen der gesamte Inhalt einer DIV zentriert ist, und das ist nicht das, was ich will.

Seht jemand mit gutem CSS -Wissen das Problem in meinem Code? Oder haben Sie eine andere Lösung, um mein Problem zu lösen.

Vielen Dank!

BEARBEITEN: Hier ist ein Screenshot des gesamten Layouts aufgrund von Anfrage. Entschuldigung, ich muss einige Dinge verwischen ... aber sie sind in beiden Fällen nicht wichtig. =))

Edit2: Ich habe es geschafft, mein Problem mit den folgenden CSS zu lösen:

.v-button-details-panel-header .v-button-wrap {
    height: 100%;
    text-align: inherit;
    padding: 0px;
}

.v-button-details-panel-header .v-button-wrap .v-button-caption {
    display: table-cell;
    position: relative;
    text-align: left;
}

.v-button-details-panel-header .v-button-wrap .v-icon {
    display: table-cell;
    position: relative;
    top: 12px;
    margin-left: auto;
    margin-right: auto;
}

Ich bin sicher, der Rat dgvid Vorgeschlagen wäre für ein statisches Layout gut gewesen. Aber da sich die Tafeln und horizontal gestreckten Knöpfe je nach Expansion und Zusammenbruch bewegen, war dies keine Anpassungslösung.

Answer 1

Möglicherweise müssen Sie das CSS einstellen display Eigenschaft sowohl Ihres IMG als auch von span.v_button_caption zu inline-block.

Siehe auch diesen Artikel: Vertikaler Align verstehen oder "wie (nicht) in den vertikalen Zentrum des Inhalts"

Was eine andere Technik betrifft, um das gewünschte Ergebnis zu erzielen: Wenn Sie die Höhe des Containerelements kennen und wissen, dass die Höhe des Elements zentriert werden soll (und leider aus dem CSS, das Sie gepostet haben, scheint es nicht, dass Sie dies tun). Dann könntest du

1. Geben Sie das Containerelement CSS -Eigenschaft "Position: Relativ" an.
2. Geben Sie das zukünftige CSS-Eigenschaft an position: absolute
3. Setzen Sie das CSS top Eigenschaft des zukünftigen Elements auf (Containerheight / 2)-(zentrales / 2).