Le positionnement des div au milieu d'une autre div
Je veux positionner le symbole de plus dans le ci-dessous en plein milieu du cercle. Maintenant, j'ai essayé à l'aide de haut , à gauche propriétés. Qui ne travaillaient que pour un seul appareil. Lorsque je consulte la page sur un smartphone, tout est perdu. J'ai donc besoin d'une méthode sans l'aide de haut et de gauche, et telle que le déplacement du cercle n'affectera pas le plus(il restera dans le centre).
Mon code :
<html>
<body>
<div id="button"><div id="plus">+</div></div>
</body>
<style>
#button
{
position : relative;
width : 100px;
height : 100px;
border-radius : 100%;
background-color : red;
}
#plus
{
display : inline-block;
position : absolute;
width : 50%;
height : 50%;
margin : auto;
left : 5px;
font-family : sans-serif;
font-size : 40px;
color : black;
vertical-align : middle;
text-alignment : center;
}
</style>
- Pour commencer, le texte-l'alignement doit être
text-align
Vous devez vous connecter pour publier un commentaire.
Ce violon contient une version qui maintient la position centrale lors de la mise à jour de la taille de la police. Il ne dépendent cependant de CSS3 est
translate-y
. Si le soutien de navigateurs plus anciens est une question de vérifier cette ressource pour voir ce que les navigateurs, il est pris en charge dans. Comme pour mon commentaire cependant, il n'est pas garanti d'être parfait en raison de la police de variations.Tous vous avez besoin est d'avoir en haut et à gauche de 25% sur le signe plus
HTML:
Une autre option est d'ajouter
display:table-cell
à la div parent. Cette question a été bien haché avec cette SORTE de question.Voici ce que j'ai: http://jsfiddle.net/117ew9Lf/
Sont que vous essayez d'aligner le plus à l'intérieur que l'extérieur de la div, ou de la div? Voir ce violon pour le positionnement de la div ne PAS le caractère plus: http://jsfiddle.net/yfLxd5zk/
+
N'est-ce pas le cas idéal pour
line-height
, comme le "plus" est littéralement une police de caractère et le wrapper a spécifié les dimensions?CSS
HTML
http://jsfiddle.net/cibulka/d68s58xx/
J'ai eu le même problème, j'ai résolu de la façon suivante.
De sortie :