Wie man Bild-und-Eingang auf der gleichen Linie mit css

Ich versuche zu tun, etwas wirklich einfaches: Bild und input auf der gleichen Linie, kann es aber nicht erreichen:

HTML

<img src="path/to/img"/>
<input/>

CSS

img {
    height: 50px;
}
input {
    height: 50px;
    margin: 0;
    padding: 0;
}

Als Sie deutlich sehen diese Geige, Bild ist viel höher als die Eingangsspannung. Wie kann ich es beheben?

InformationsquelleAutor Salvador Dali | 2014-07-01
  1. 8

    Verwenden Sie die vertical-align Eigenschaft:

    img{
    height: 50px;
    vertical-align: middle;
}

    Sehen aktualisiert fiddle

    InformationsquelleAutor koala_dev
  2. 1

    War ich in der Lage, um den Effekt zu erzielen, die Sie suchen, mit Schwimmern: 

    img{
    height: 50px;
    float: left;
}
input{
    height: 50px;
    margin: 0;
    padding: 0;
    float: left;
}

    Fiddle

    InformationsquelleAutor Peter Jewicz
  3. 0

    Verwenden vertical-align, wie diese:

    img{
    height: 50px;
    vertical-align: middle;
}
input{
    height: 50px;
}
    InformationsquelleAutor John Bupit
  4. 0

    Sie können auch schwimmen auf den img wie diese:

    img{
    height: 50px;
    float:left;
}
input{
    height: 50px;
}
    InformationsquelleAutor Ryan Seys
Schreibe einen Kommentar