[Résolu] Aligner verticalement un champ de texte et un bouton image

Bonsoir,

J'aimerai savoir comment aligner verticalement un champ de texte et un bouton image via une balise div.

Voici le morceau de code en question :

<div style="height:35px; width:650px; margin:auto;">
<form name=searchForm action="result.php" method="get">
<input size=20 ame="search_id" value="requete">
<input type=image src="images/rechercher.jpg" width="120" height="35">
</form>
</div>

Dans mon ignorance, j'ai essayé vertical align et line-height mais rien n'y fait. Avez-vous une solution?

Merci beaucoup
Modifié par MasterPingouin (28 Apr 2007 - 18:03)

Re-travailler la question de vertical-align. En dehors des cellules de tableau, cette propriété doit s'appliquer à l'élément à aligner verticalement, et non pas à son conteneur.

http://wiki.media-box.net/documentation/css/vertical-align

Peux-tu me fournir un exemple car j'ai vraiment du mal à comprendre : quand j'essaye d'appliquer vertical align (middle) au champ de texte celui-ci viens se placer au dessus du bouton.

Merci.

Et avec ça ?

form input {vertical-align: middle;}

Comme je le disais dans mon précédent message, la propriété vertical-align s'applique sur les éléments à aligner verticalement. Pour être plus juste, il faudrait dire qu'elle s'applique aux éléments de type en-ligne, ce qui correspond bien ici aux deux éléments input.

Ca fonctionne, par contre il y a un overflow sous IE.
Décidément IE ne m'aime pas :

<style type="text/css">

form input {vertical-align: middle;}

.barre {
width:650px; 
height:35px; 
margin:auto; 
background-color:#000000; 
}


</style>

<div class="barre">
<form name=searchForm action="result.php" method="get">
	<input size=20 ame="search_id" value="requete">
	<input type=image src="images/rechercher.jpg" width="120" height="35">
</form>
</div>

MasterPingouin a écrit :
Ca fonctionne, par contre il y a un overflow sous IE.

Oui, ça arrive quand on entretient encore l'illusion de pouvoir maitriser la hauteur des éléments au pixel près.
À toi de voir si tu veux contraindre à une hauteur fixe (avec un overflow: hidden par exemple) ou bien prévoir que ton contenu peut prendre plus de hauteur que prévu (ne serait-ce que parce qu'on a légèrement agrandi la taille du texte) et intégrer ta mise en page en conséquence.

Un indice : les cas où l'on a absolument besoin d'une hauteur fixe pour un élément sont très rares.