Comment centrer un élément" position: absolute"
j'ai un problème avec un élément dont l'attribut position est défini à absolute .
Personne ne sait pourquoi les images ne sont pas centré?
css lang-css prettyprint-override">body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align: center;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: absolute;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 450px;
}
html lang-html prettyprint-override"><body>
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
<li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
</ul>
</div>
</body>
23 réponses
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
sans connaître le width / height de l'élément positionné 1 , il est encore possible de l'aligner comme suit:
.child {
position: absolute;
top: 50%; /* position the top edge of the element at the middle of the parent */
left: 50%; /* position the left edge of the element at the middle of the parent */
transform: translate(-50%, -50%); /* This is a shorthand of
translateX(-50%) and translateY(-50%) */
}
Il est intéressant de noter que CSS Transform est pris en charge dans IE9 et au-dessus de . (préfixes de Vendeur omis par souci de brièveté)
explication
ajouter top / left de 50% déplace le bord supérieur/gauche de l'élément au milieu du parent, et translate() fonction avec le (négatif) valeur de -50% déplace l'élément par la moitié de sa taille. D'où l'élément sera placé à l' milieu.
cela est dû au fait qu'une valeur en pourcentage sur top / left les propriétés sont relatives à la hauteur/largeur de l'élément parent (qui crée un bloc contenant).
alors qu'une valeur en pourcentage sur translate() transform fonction est relative à la largeur / hauteur de l'élément lui-même (en fait, il se réfère à la taille de zone de délimitation ) .
pour l'alignement unidirectionnel, allez avec translateX(-50%) ou translateY(-50%) à la place.
1. Un élément avec un position autre que static . I. e. relative , absolute , fixed valeurs.
Centrage quelque chose absolute ly positionné, c'est plutôt compliqué dans le CSS.
ul#slideshow li {
position: absolute;
left:50%;
margin-left:-20px;
}
changez margin-left en (négatif) la moitié de la largeur de l'élément que vous essayez de centrer.
Div verticalement et horizontalement aligné centre
top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;
Note : les éléments doivent avoir une largeur et une hauteur à régler
un simple truc CSS, Il suffit d'ajouter:
width: 100%;
text-align: center;
cela fonctionne à la fois sur les images et le texte.
si vous voulez centrer un élément absolu
#div {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
si vous voulez qu'un conteneur soit centré de gauche à droite, mais pas de haut en bas
#div {
position:absolute;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
si vous voulez qu'un conteneur soit centré de haut en bas, sans se soucier d'être de gauche à droite
#div {
position:absolute;
top:0;
bottom:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
mise à jour en date du 15 décembre 2015
J'ai appris cette nouvelle astuce il y a quelques mois. Supposer que vous avez un élément parent relatif.
Voici votre élément absolu.
.absolute-element {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:50%; /* You can specify ANY width values here */
}
avec ceci, je pense que c'est une meilleure réponse que mon ancienne solution. Puisque vous n'avez pas à spécifier la largeur et la hauteur. Celle-ci, elle adapte le contenu de l'élément lui-même.
pour centrer une position:attribut absolu vous devez mettre à gauche:50% et marge-gauche: -50% de la largeur du div.
<!-- for horizontal -->
<style>
div.center{
width:200px;
left:50%;
margin-left:-100px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered horizontaly
</div>
</body>
pour vertical center absolute vous devez faire la même chose bud pas avec gauche juste avec le haut. ( NOTE: le html et le corps doit avoir min-hauteur de 100%; )
<!-- for vertical -->
<style>
body,html{
min-height:100%;
}
div.center{
height:200px;
top:50%;
margin-top:-100px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered verticaly
</div>
</body>
et peut être combiné pour les deux
<!-- for both -->
<style>
body,html{
min-height:100%;
}
div.center{
width:200px;
height:50px
left:50%;
top:50%;
margin-left:-100px;
margin-top:-25px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered
</div>
</body>
cela a fonctionné pour moi:
position: absolute;
left: 50%;
transform: translateX(-50%);
<div class="centered_content"> content </div>
<style type="text/css">
.centered_content {
text-align: center;
position: absolute;
left: 0;
right: 0;
}
</style>
voir démo sur: http://jsfiddle.net/MohammadDayeh/HrZLC/
text-align: center ; fonctionne avec un élément position: absolute lors de l'ajout de left: 0; right: 0;
le plus simple, le meilleur:
img {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto auto;
position: absolute;
}
ensuite, vous devez insérer votre étiquette img dans une étiquette que la position du sport: propriété relative, comme suit:
<div style="width:256px; height: 256px; position:relative;">
<img src="photo.jpg"/>
</div>
Si vous ne connaissez pas la largeur de l'élément, vous pouvez utiliser ce code:
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
Démo au violon: http://jsfiddle.net/wrh7a21r /
Je ne suis pas sûr de ce que vous voulez accomplir, mais dans ce cas, ajouter width: 100%; à votre ul#slideshow li fera l'affaire.
explication
les étiquettes img sont des éléments inline-block. Cela signifie qu'ils coulent en ligne comme du texte, mais ont aussi une largeur et une hauteur comme des éléments de bloc. Dans votre css Il y a deux règles text-align: center; appliquées au <body> et au #slideshowWrapper (qui est redondant btw) Cela fait que tous les éléments enfants en ligne et en ligne-bloc sont centrés dans leurs éléments de bloc les plus proches, dans votre code ce sont des étiquettes li . Tous les éléments de Bloc ont width: 100% s'ils sont le flux statique ( position: static; ), qui est par défaut. Le problème est que quand vous dites li tags pour être position: absolute; , vous les sortez du flux statique normal, et cela les amène à rétrécir leur taille pour juste s'adapter à leur intérieur contenu, en d'autres termes, ils sorte de "perdre" leur width: 100% propriété.
à l'Aide de
left: calc(50% - Wpx/2); où W est la largeur de l'élément fonctionne pour moi.
pour centrer un élément" position: absolu".
ajouter ces
left: 0%;
right: 0%;
text-align: center;
ou ces
left: 0%;
right: 0%;
margin: 0 auto;
élément : position absolue
.element {
position: absolute;
}
élément centré
.element {
position: absolute;
left: 0%;
right: 0%;
text-align: center; // or this -> margin: 0 auto;
}
un objet absolu à l'intérieur d'un objet relatif est relatif à son parent, le problème ici est que vous avez besoin d'une largeur statique pour le conteneur #slideshowWrapper , et le reste de la solution est comme les autres utilisateurs dit
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align:center;
width: 500px;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: relative;
left: 50%;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 450px;
}
Voici la solution facile et la meilleure pour l'élément central avec" position: absolute "
body,html{
min-height:100%;
}
div.center{
width:200px;
left:50%;
margin-left:-100px;/*this is 50% value for width of the element*/
position:absolute;
background:#ddd;
border:1px solid #999;
height:100px;
text-align:center
}
<style>
</style>
<body>
<div class='center'>
should be centered verticaly
</div>
</body>vos images ne sont pas centrées parce que les éléments de votre liste ne sont pas centrés; seul leur texte est centré. Vous pouvez obtenir le positionnement que vous voulez en centrant la liste entière ou en centrant les images dans la liste.
une version révisée de votre code se trouve au bas. Dans ma révision, Je centre à la fois la liste et les images qu'elle contient.
la vérité c'est toi ne peut pas centrer un élément dont la position est fixée à l'absolu.
Mais ce comportement peut être imité!
Note: Ces instructions fonctionneront avec n'importe quel élément de bloc DOM, pas seulement img.
-
entourez votre image d'une balise div ou autre (dans votre cas un li).
<div class="absolute-div"> <img alt="my-image" src="#"> </div>Note: les noms donnés à ces éléments ne sont pas spéciales.
-
modifiez votre css ou scss pour donner le positionnement absolu div et votre image centrée.
.absolute-div { position: absolute; width: 100%; // Range to be centered over. // If this element's parent is the body then 100% = the window's width // Note: You can apply additional top/bottom and left/right attributes // i.e. - top: 200px; left: 200px; // Test for desired positioning. } .absolute-div img { width: 500px; // Note: Setting a width is crucial for margin: auto to work. margin: 0 auto; }
et voilà! Votre img doit être centré!
votre code:
Essayez ceci:
body
{
text-align : center;
}
#slideshow
{
list-style : none;
width : 800px;
// alter to taste
margin : 50px auto 0;
}
#slideshow li
{
position : absolute;
}
#slideshow img
{
border : 1px solid #CCC;
padding : 4px;
height : 500px;
width : auto;
// This sets the width relative to your set height.
// Setting a width is required for the margin auto attribute below.
margin : 0 auto;
}<ul id="slideshow">
<li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
<li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>j'espère cela a été utile. Bonne chance!
position absolute le sort du flux, et le place à 0x0 au parent ( dernier élément de bloc pour avoir une position absolue ou relative ).
Je ne suis pas sûr de savoir exactement ce que vous essayez d'accomplir, il pourrait être préférable de mettre le li à un position:relative et cela les centrera. Compte tenu de votre CSS actuel
Check out http://jsfiddle.net/rtgibbons/ejRTU/ jouer avec
#parent
{
position : relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25% /* images with aspect ratio: 16:9 */
}
img
{
height: auto!important;
width: auto!important;
min-height: 100%;
min-width: 100%;
position: absolute;
display: block;
/* */
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
Je ne me souviens pas où j'ai vu la méthode de centrage indiquée ci-dessus, en utilisant des valeurs négatives top, right, bottom, left. Pour moi, ce tehnique est le meilleur, dans la plupart des situations.
lorsque j'utilise la combinaison ci-dessus, l'image se comporte comme une image de fond avec les paramètres suivants:
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
pour plus de détails sur le premier exemple, cliquez ici.:
maintenir le rapport d'aspect de un div avec CSS
vous pouvez essayer de cette façon:
* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative;
text-align: center;
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg');
background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px;
display: inline-block; margin: auto; z-index: 999999; }<html>
<body>
<div id="body" class="container-fluid">
<!--Background-->
<!--Text-->
<div class="text">
<p>Random</p>
</div>
</div>
</body>
</html>ce qui semble se produire, c'est qu'il y a deux solutions: centrées en utilisant les marges et centrées en utilisant la position. Les deux fonctionnent bien, mais si vous voulez positionner un élément par rapport à cet élément centré, vous devez utiliser la méthode de la position absolue, parce que la position absolue du deuxième élément est par défaut au premier parent qui est positionné. Comme ceci:
<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
<p style="line-height:4;">width: 300 px; margin: 0 auto</p>
<div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
<p style="line-height:4;">Absolute</p>
</div>
</div>
<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
<p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
<div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
<p style="line-height:4;">Absolute</p>
</div>
</div>
Jusqu'à ce que je lise ce message, en utilisant la technique de marge:0 auto, pour construire un menu à la gauche de mon contenu, j'ai dû construire une même largeur de colonne vers la droite pour l'équilibrer. Pas assez. Merci!
Utiliser margin-left: x%; où x est la moitié de la largeur de l'élément.
html, body, ul, li, img {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
#slideshowWrapper {
width: 25rem;
height: auto;
position: relative;
margin-top: 50px;
border: 3px solid black;
}
ul {
list-style: none;
border: 3px solid blue;
}
li {
/* center horizontal */
position: relative;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
/* center horizontal */
border: 3px solid red;
}
img {
border: 1px solid #ccc;
padding: 4px;
//width: 200px;
height: 100px;
}<body>
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
<li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
<li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>
</ul>
</div>
</body>