Ich kann mein Bild nicht vertikal zentrieren

Ich versuche, vertikal ein Bild zu zentrieren, das mein Submit-Button sein wird. Ich habe diese HTMLIch kann mein Bild nicht vertikal zentrieren

<div style="display:inline-block; vertical-align:middle"><input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button"></div>

und dann diese Klasse das

.search_button { 
     vertical-align: middle; 
}

Jedoch Bild gebunden, wird das Bild nach wie vor an der Spitze des DIV ausgerichtet ist. Das Bild ist in der Mitte unterbrochen, aber Sie können den Alt-Text sehen, der nach oben ausgerichtet ist - . Wie richte ich es vertikal aus?

Quelle

2016-08-23 Anonymous

[Die de facto Anleitung zur Zentrierung in CSS] (https://css-tricks.com/centering-css-complete-guide/) – neilsimp1

Ich lese diesen Leitfaden in seiner Gesamtheit und die Antwort ist nicht da. –

Sie haben alle divs ausrichten:

div#statSearchFields div { 
    vertical-align: middle; 
}

Quelle

2016-08-23 19:53:55 Vcasso

Ich möchte nicht alle anderen DIVs ausrichten - ich möchte, dass die anderen DIVs vertikal genau dort bleiben, wo sie sind. Die einzige Sache, die ich in die Mitte verschieben möchte, ist das DIV, das dieses Suchbild enthält. –

Die anderen zwei Divs werden sich nicht bewegen. Füge einfach das obige Snippet zu deiner Geige hinzu und probiere es aus. Wenn Sie alle drei Divs in der Mitte ausrichten, bleiben die ersten beiden Divs gleich, da sie dieselbe Höhe haben. Also müssen alle drei divs in der Mitte ausgerichtet sein. – Vcasso

.searchField {display: inline-block; vertical-align: bottom;}

es auf den Boden des Feldes Behälter auszurichten. Und Sie können die Inline-vertical-align entfernen ... und die align auf die Schaltfläche selbst ...

fiddle update

Quelle

2016-08-23 19:54:10 Scott

Ich möchte es nicht nach unten ausrichten. Ich möchte es auf die Mitte (Mitte) ausrichten. –

Didi du * schau * auf die Geige ??? – Scott

Sie display: table; und display: table-cell; verwenden können.

Take a look here.

Quelle

2016-08-23 20:05:13

Auf welche Elemente verwende ich diese Stilattribute? –

Siehe den Link. Alles, was Sie brauchen, ist da. :) –

erwartete Ergebnis zu erzielen, unter Verwendung

HTML:

<div class="test" style="display:inline-block; vertical-align:middle"><input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button"></div> 
</div>

CSS:

.test{ 
    position:absolute; 
    top:50%; 
}

https://jsfiddle.net/Nagasai_Aytha/hLn6fv49/4/

Quelle

2016-08-23 20:40:17

Ich kann mein Bild nicht vertikal zentrieren

Antwort

Verwandte Themen