Centre d'Aligner le bouton Soumettre
J'ai un formulaire avec une zone de texte et le bouton de validation.
J'ai flotté textarea à gauche et le bouton de validation à droite.
C'est la façon dont il est affiché dans Firefox.
C'est la façon dont il est affiché dans IE.
C'est le code html que j'ai écrit.
<div id="form">
<form method="post" action="google.php">
<textarea rows="3" cols="40" style="width: 300px; float: left;"></textarea>
<input type="submit" style="width: 100px; float: right;" />
</form>
</div>
C'est le Code CSS:
#form {
overflow: auto;
border: 1px solid black;
width: 600px;
padding-left: 10px;
padding-right: 10px;
}
Comment aligner le bouton soumettre verticalement dans le centre à l'égard de la zone de texte.?
RÉPONSE :
J'ai modifié le code pour l'adapter à mes besoins.
C'est le code CSS :
#form {
overflow: auto;
border: 1px solid black;
width: 600px;
padding-left: 10px;
padding-right: 10px;
}
#form textarea {
vertical-align: middle;
}
#form span{
display: inline-block;
vertical-align: middle;
margin-left: 40px;
}
Code HTML:
<div id="form">
<form method="post" action="google.php">
<textarea rows="3" cols="40" style="width: 300px; "></textarea>
<span><input type="submit" value="Comment" /></span> </form>
</div>
OriginalL'auteur Pradeep | 2013-08-05
Vous devez vous connecter pour publier un commentaire.
Vous pouvez faire usage de
display:table
etdisplay:table-cell
, de la propriété. Mais dans ce cas, vous devez supprimerfloats
et donner de la largeur.HTML
CSS
VIOLON:
http://jsfiddle.net/7gnMu/
OriginalL'auteur Kalpesh Patel
Vous pouvez utiliser
position: absolute
sur le bouton "soumettre", et le mettre à 50% à partir du haut, moins de la moitié de la hauteur du bouton dans la marge en haut. Voir ce violon:http://jsfiddle.net/cXSbX/
OriginalL'auteur Mary
vous pouvez donner
margin-left
oumargin-right
propriété.ex:
margin-left:135px;
OriginalL'auteur Veni
Enveloppez-le d'entrée avec certains éléments de texte et de centre d'aligner l'entrée.
http://jsfiddle.net/UuFg2/
OriginalL'auteur max li
Essayer la Js fiddle
http://jsfiddle.net/wZs2F/
OriginalL'auteur Arun Bertil
Dans ce cas vertical-align: bottom ne fonctionnera pas. Au lieu de la hauteur et la hauteur de la ligne fera de votre bouton pour aligner centrée verticalement.
Ajouté à la suite de styles pour l'entrée:
Ont un coup d'oeil au travail de démonstration ici: Démo
OriginalL'auteur web2008