web-dev-qa-db-fra.com

Article de centre CSS avec position: relative;

J'ai une question pour vous les gourous CSS!

J'ai un menu qui apparaît au survol d'une div absolument positionnée. Tous les éléments de menu doivent être relativement positionnés, car l'élément absolu apparaîtra plusieurs fois sur une page et apparaîtra dans plusieurs tailles à la fois.

Comment pourrais-je centrer plusieurs éléments avec 'position: relative' à la fois verticalement et horizontalement sans connaître la taille de la div parente?

Je connais le tour "position: absolu" avec des marges négatives, mais cette situation appelle quelque chose de différent.

Votre aide serait extrêmement appréciée.

Modifier:

Voici le code:

.OuterCase { 
  position  : absolute; 
  width     : 100%;  
  height    : 100%; 
  text-align: center;
}

.InnerItem  { 
   width  : 38px;
   height : 38px;
   display: inline-block;
}

Je l'ai pour centrer les articles horizontalement pour obtenir la verticale qui est un peu insaisissable. Merci!

csspositionalignmentcenterrelative
58
Flippinmonk

Beaucoup plus simple:

position: relative; 
left: 50%;
transform: translateX(-50%);

Vous êtes maintenant centré dans votre élément parent. Vous pouvez le faire verticalement aussi.

39
Hexxefir

Alternativement, vous pouvez également utiliser le Modèle de boîte flexible CSS . C'est un excellent moyen de créer des mises en page flexibles qui peuvent également être appliquées au centre du contenu, comme ceci:

#parent {
    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;
}
25
DADU

Si vous avez un div positionné relativement (ou autrement), vous pouvez centrer quelque chose à l'intérieur avec margin:auto

Centrage vertical est un peu plus compliqué, mais possible.

13
spraff

Vous pouvez utiliser calc pour positionner l'élément par rapport au centre. Par exemple, si vous souhaitez positionner l'élément 200px directement depuis le centre .. vous pouvez le faire:

#your_element{
    position:absolute;
    left: calc(50% + 200px);
}

N'oublie pas ça

Lorsque vous utilisez des signes + et - vous devez laisser un espace entre le signe et le nombre, mais lorsque vous utilisez des signes * et / il n'y a pas besoin d'espace vide.

12
Matija

Une autre option consiste à créer un wrapper supplémentaire pour centrer l'élément verticalement.

#container{
  border:solid 1px #33aaff;
  width:200px;
  height:200px;
}

#helper{
  position:relative;
  height:50px;
  top:50%;
  border:dotted 1px #ff55aa;
}

#centered{
  position:relative;
  height:50px;
  top:-50%;
  border:solid 1px #ff55aa;
}
<div id="container">
  <div id="helper">
    <div id="centered"></div>
  </div>
<div>
0
Paweł