Problem bei der Positionierung von Form-Elementen

[xTOEMx]

Wie im Screenshot zu sehen ist das input-Element und der Button nicht auf gleicher Höhe und ich verstehe einfach nicht wieso.



CSS

.foyersuche                     {margin-top:150px;text-align:center;display:block;padding:20px;color:#fff;}
.foyersuche input                 {display:inline-block;font-family: 'Voltaire', sans-serif;border:0;color:#fff;background:#82A802;font-size:40px;padding:10px;width:500px;border-radius:5px;}
.foyersuche button             {display:inline-block;margin-left:5px;border:0;padding:10px;background:#82A802;border-radius:5px;}
.foyersuche button:hover         {background:#AB0051;cursor:pointer;}

HTML

<form class="foyersuche" method="get" action="suche.php">
        <input type="text" placeholder="Suchbegriffe..." name="term"/>
        <button><img src="img/search_48.png"></button>
</form>

 

[threadi]

Ergänze mal bei input und button noch

vertical-align: middle;

 

[xTOEMx]

Funktioniert. Vielen Dank! :mrgreen: