Avec le CSS 3, il y a aucune façon à l'aligner verticalement un élément de bloc? Avez-vous un exemple? Je vous remercie.
Réponses
Trop de publicités?
Charlie
Points
701
Était à la recherche à ce problème récemment, et j'ai essayé:
HTML:
<body>
<div id="my-div"></div>
</body>
CSS:
#my-div {
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
background: red;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Voici le Violon:
Il fonctionne même lorsque l'aide "width/height: auto", à la place de dimensions fixes. Testé sur les dernières versions de Firefox, Chrome et IE (* soupir *).
Crashalot
Points
3805
Remarque: Cet exemple utilise la version provisoire de la souplesse de la Boîte de Mise en page du Module. Il a été remplacé par l'incompatibles moderne de la spécification.
Centre les éléments enfants d'un div de la boîte en utilisant la boîte d'alignement et de zone-pack propriétés de l'ensemble.
Exemple:
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
andreyne
Points
3652
À L'Aide De Flexbox:
.container {
display: flex;
/* Vertical align: */
align-items: center;
/* Horizontal align: */
justify-content: center;
}
jsFiddle: http://jsfiddle.net/maars/8Uyvf
Prise en charge du navigateur: http://caniuse.com/flexbox (certains navigateurs besoin de préfixe)
j-man86
Points
3657
un couple de façons:
1. Positionnement absolu-- vous avez besoin d'avoir déclaré la hauteur pour faire ce travail:
<div>
<div class='center'>Hey</div>
</div>
div {height: 100%; width: 100%; position: relative}
div.center {
width: 100px;
height: 100px;
top: 50%;
margin-top: -50px;
}
*2. Utiliser display: table http://jsfiddle.net/B7CpL/2/ *
<div>
<img src="/img.png" />
<div class="text">text centered with image</div>
</div>
div {
display: table;
vertical-align: middle
}
div img,
div.text {
display: table-cell;
vertical-align: middle
}
- Plus tutoriel détaillé à l'aide de display: table
Edouard Kombo
Points
31
