webentwicklung-frage-antwort-db.com.de

CSS-Center-Item mit Position: relativ;

Ich habe eine Frage an Sie CSS-Gurus da draußen!

Ich habe ein Menü, das beim Schweben über einem absolut positionierten div angezeigt wird. Alle Menüelemente müssen relativ zueinander positioniert werden, da das absolute Div mehrmals auf einer Seite und in mehreren Größen in einer Instanz angezeigt wird.

Wie zentriere ich mehrere Elemente mit "position: relative" sowohl vertikal als auch horizontal, wenn ich die Größe des übergeordneten Div nicht kenne?

Ich kenne den 'Position: Absolut'-Trick mit negativen Margen, aber diese Situation erfordert etwas anderes.

Ihre Hilfe wäre sehr dankbar.

Bearbeiten:

Hier ist der Code:

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

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

Ich muss die Objekte horizontal zentrieren, damit die Vertikale ein wenig schwer zu fassen ist. Vielen Dank!

58
Flippinmonk

Viel einfacher:

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

Sie sind jetzt in Ihrem übergeordneten Element zentriert. Sie können das auch vertikal machen.

39
Hexxefir

Alternativ können Sie auch das CSS3 Flexible Box Model verwenden. Auf diese Weise können Sie flexible Layouts erstellen, die auch auf den zentralen Inhalt angewendet werden können:

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

Wenn Sie ein relativ (oder anderweitig) positioniertes div haben, können Sie mit margin:auto Etwas darin zentrieren.

Vertikale Zentrierung ist ein bisschen komplizierter, aber möglich.

13
spraff

Sie können calc verwenden, um das Element relativ zur Mitte zu positionieren. Wenn Sie beispielsweise das Element 200px Direkt von der Mitte aus positionieren möchten, können Sie dies tun:

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

Vergiss das nicht

Wenn Sie die Zeichen + Und - Verwenden, müssen Sie ein Leerzeichen zwischen Zeichen und Zahl einfügen. Wenn Sie jedoch die Zeichen * Und / Verwenden, ist dies nicht erforderlich für Leerzeichen.

12
Matija

Eine andere Möglichkeit besteht darin, einen zusätzlichen Wrapper zu erstellen, um das Element vertikal zu zentrieren.

#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ł