HTML/CSS est ci-dessous.
Ajout de margin-top:5px à la "Créer une nouvelle .." div aide mais il semble hacky.
<div style="margin-top:5px">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
</div>
Ce qui suit peut vous être utile.
<div align="center">
</div>
Il ressemblerait à ceci peut-être:
<div align="center">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
Faire la hauteur de ligne de l'intérieur div la même hauteur que la hauteur de la div extérieur.
Exemple:
<div style="margin-top:5px; height: 100px;">
<div style="float:left; line-height: 100px;">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
</div>
Cette méthode devrait fonctionner dans tous les navigateurs, est stable, et vous permet de choisir facilement l'objet auquel vous voulez que votre contenu centré. Le conteneur vide est le seul problème que j'ai avec cette méthode, mais je peux facilement l'ignorer en comparant les avantages/inconvénients d'autres méthodes.
Solution: Vous utilisez un div à la moitié de la hauteur du parent pour pousser votre bloc de contenu (classe push_to_center), puis le réduire par la moitié de la hauteur du contenu (classe de contenu).
déclaration de style en ligne
<div style="float:left; height:50%; margin-bottom:-55px;"></div>
<div style="clear:both; height:110px; position:relative; width:200px;">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
</div>
la page HTML complet (see it working):
<html><head><title>Test Center Div</title>
<style>
.push_to_center {float:left; height:50%; margin-bottom:-55px;}
.content {clear:both; height:110px; position:relative;}
</style>
</head>
<body>
<div class="push_to_center"></div>
<div class="content" style="width:200px; height:110px;">
<div style="float:left;">Create new position</div>
<div style="float:right;"><input type="submit" id="x" value="Save"></div>
</div>
</body>
</html>
Pour exclure le bouton Enregistrer de centrage déplacer simplement hors du contenu div classé (mettez-le plus tôt dans le flux de la page si vous le souhaitez ci-dessus, et ci-dessous dans la page si vous le souhaitez en bas):
approche légèrement différente, mais vous n'avez pas besoin des flotteurs, vertical-align devrait fonctionner correctement en l'occurrence l'OMI:
<div>
Create new position:
<input type="submit" id="x" value="Save" style="vertical-align:baseline;" />
</div>
J'ai toujours utilisé cette astuce:
style="height: 30px; line-height: 30px; vertical-alignment: middle;"
ayant une hauteur fixe plus la même hauteur que la hauteur de la ligne et l'alignement vertical moyen.
Peut-être que ce qui précède est de meilleures réponses, je poste ce parce que c'est simple et a fonctionné pour moi. :)
Pour résoudre ce problème, ajoutez margin-top:4px à la div "Create Position". C'était la seule solution que je pouvais obtenir au travail !!
Cela fonctionnera .....
<table style="height:500px;width:100%">
<tr>
<td>
<div style="margin-top:px;vertical-alignment: middle;height: 30px; line-height: 30px;">
<div style="float:left;">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
</div>
</td>
</tr>
</table>
Les éléments suivants fonctionneront en fonction de la création d'une hauteur de ligne équivalente pour les deux éléments.
HTML:
<div class="row">
<span class="left">Create new position</span>
<span class="right"><input type="button" value="Save" />
</div>
CSS:
/* REMOVE THIS PORTION FOR YOUR IMPLEMENTATION, IT IS EXAMPLE ONLY */
* { font-family: Tahoma, sans-serif; font-size: 12px; }
.row { border: 1px solid #ccc; }
/* END EXAMPLE ONLY PORTION */
.row { height: 24px; }
.row > span { line-height: 24px; }
.left { float: left; }
.right { float: right; }
L'astuce consiste à définir la .row dire contenant DIV être 24px grands, et aussi définir les contenus SPAN éléments pour avoir une line-height de 24px. En faisant cela, vous dites au navigateur combien d'espace vertical doit prendre pour la ligne de texte.
Notez, cependant, que 24px n'est pas la partie importante - la partie importante est d'identifier la hauteur de votre button, qui est basée sur votre CSS et votre police sélectionnée pour le bouton lui-même.
La raison pour laquelle l'exemple que je vous donne fonctionne pour centrer verticalement dans ce cas est basé sur le CSS EXAMPLE ONLY que je mets en haut - qui dit que la taille de la police doit être 12px. Le dimensionnement par défaut du navigateur (au moins dans Chrome) va alors fournir une marge supplémentaire et un rembourrage autour du bouton, ainsi qu'une bordure - qui donne une hauteur totale d'environ 24px, et cette apparence:
La bordure est créée par l'exemple CSS également, et est seulement là pour vous montrer que l'alignement vertical est correct. Une fois que vous enlevez .row { border: 1px solid #ccc; }, il disparaîtra.
Voici une JSBin qui montre fonctionner:
Si ma réponse vous a aidé, s'il vous plaît envisager de marquer comme « accepté » en cliquant sur la petite case sous son score. Si ce n'est pas le cas, faites-moi savoir quelles sont les informations dont vous avez besoin, afin que je puisse vous aider davantage. –