Zwei Elemente innerhalb eines div vertikal zentrieren [duplicate]

Lesezeit: 3 Minuten

Zwei Elemente innerhalb eines div vertikal zentrieren duplicate
Romuloux

Ich versuche, zwei vertikal zu zentrieren <p> Elemente.

Ich habe das Tutorial unter befolgt phrogz.net aber die Elemente werden immer noch über dem div platziert, unter dem div, oben ausgerichtet innerhalb des div.

Ich würde etwas anderes versuchen, aber die meisten Fragen hier verweisen nur auf dieses Tutorial.

Dieses Snippet ist für ein Banner, das sich oben auf einer Webseite befindet.

.banner {
  width: 980px;
  height: 69px;
  background-image: url(../images/nav-bg.jpg);
  background-repeat: no-repeat;
  /* color: #ffffff; */
}

.bannerleft {
  float: left;
  width: 420px;
  text-align: right;
  height: 652px;
  line-height: 52px;
  font-size: 28px;
  padding-right: 5px;
}

.bannerright {
  float: right;
  width: 555px;
  text-align: left;
  position: relative;
}

.bannerrightinner {
  position: absolute;
  top: 50%;
  height: 52px;
  margin-top: -26px;
}
<div class="banner">
  <div class="bannerleft">
    I am vertically centered
  </div>
  <div class="bannerright">
    <div class="bannerrightinner">
      <p>I should be</p>
      <p>vertically centered</p>
    </div>
  </div>
  <div class="clear">
  </div>
</div>

1646175726 535 Zwei Elemente innerhalb eines div vertikal zentrieren duplicate
Michael Benjamin

So zentrieren Sie Elemente vertikal, horizontal oder beides

Hier sind zwei Möglichkeiten, Divs innerhalb von Divs zu zentrieren.

Eine Möglichkeit verwendet CSS Flexbox und der andere Weg verwendet CSS Tabelle und Positionierung Eigenschaften.

In beiden Fällen kann die Höhe der zentrierten divs variabel, undefiniert, unbekannt oder was auch immer sein. Die Höhe der zentrierten Divs spielt keine Rolle.

Geben Sie hier die Bildbeschreibung ein

Hier ist der HTML-Code für beide:

<div id="container">   

    <div class="box" id="bluebox">
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox">
        <p>DIV #2</p>
    </div>

</div>

CSS-Flexbox-Methode

#container {
    display: flex;              /* establish flex container */
    flex-direction: column;     /* stack flex items vertically */
    justify-content: center;    /* center items vertically, in this case */
    align-items: center;        /* center items horizontally, in this case */
    height: 300px;
    border: 1px solid black;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;
}

DEMO

Die beiden untergeordneten Elemente (.box) sind vertikal mit ausgerichtet flex-direction: column. Schalten Sie für die horizontale Ausrichtung um flex-direction zu row (oder entfernen Sie einfach die Regel als flex-direction: row ist die Standardeinstellung). Die Elemente bleiben vertikal und horizontal zentriert (DEMO).


CSS-Tabelle und Positionierungsmethode

body {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

#container {
    display: table-cell;
    vertical-align: middle;
}

.box {
    width: 300px;
    padding: 5px;
    margin: 7px auto;   
    text-align: center;
}

DEMO


Welche Methode verwenden …

Wenn Sie sich nicht sicher sind, welche Methode Sie verwenden sollen, würde ich Flexbox aus folgenden Gründen empfehlen:

  1. minimaler Code; sehr effizient
  2. Wie oben erwähnt, ist das Zentrieren einfach und leicht (siehe ein anderes Beispiel).
  3. Spalten gleicher Höhe sind einfach und leicht
  4. mehrere Optionen zum Ausrichten von Flex-Elementen
  5. es reagiert
  6. Im Gegensatz zu Floats und Tabellen, die eine begrenzte Layoutkapazität bieten, weil sie nie zum Erstellen von Layouts gedacht waren, ist Flexbox eine moderne (CSS3)-Technik mit einer breiten Palette von Optionen.

Browserunterstützung

Flexbox wird von allen gängigen Browsern unterstützt, außer IE < 10. Einige neuere Browserversionen wie Safari 8 und IE10 erfordern Anbieter-Präfixe. Verwenden Sie für eine schnelle Methode zum Hinzufügen von Präfixen Autoprefixer. Weitere Details in dieser Antwort.

Fügen Sie Folgendes hinzu: display:table; zu bannerRecht

display:table-cell; und vertikale Ausrichtung: Mitte; zu bannerrightinner

Ich habe das nicht ausprobiert, bitte geben Sie mir Feedback, wenn es nicht funktioniert. 😉

BEARBEITEN: vergessen zu erwähnen: Nehmen Sie die Eigenschaften ‘float’ und ‘position’ aus

  • display:table liegt daran, dass vertical-align:middle nur auf Tabellen funktioniert. Gern geschehen, ich freue mich, dass Sie die Antwort gefunden haben.

    – Fábio

    17. August 2012 um 23:22 Uhr

905780cookie-checkZwei Elemente innerhalb eines div vertikal zentrieren [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy