Mit CSS 3 vertikal ausrichten

74

Gibt es in CSS 3 eine Möglichkeit, ein Blockelement vertikal auszurichten? Hast du ein beispiel Vielen Dank.

— tho
quelle

1

Es ist kein CSS 3 - Wege ...

— tho

2

@Tho Ja, das ist es. CSS 3 ist eine Obermenge von CSS 2.

— Šime Vidas

3

Ok, Sie haben Recht, ich stimme Ihrer Bestätigung zu ... aber bietet CSS3 etwas Einfacheres? Vielen Dank.

— tho

1

Ein weiteres Beispiel für CSS3 ist ein überzeichnetes Schlagwort. CSS3 ist einfach CSS Level 3. Jede CSS1 und CSS2.x Code gilt auch CSS3, darüber hinwegzukommen .

— BoltClock

6

slides.html5rocks.com/#flex-box-2

— tho

87

Ich habe mir dieses Problem kürzlich angesehen und versucht:

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%);
}

Hier ist die Geige:

http://jsfiddle.net/sTcp9/6/

Es funktioniert sogar, wenn "width / height: auto" anstelle von festen Abmessungen verwendet wird. Getestet mit den neuesten Versionen von Firefox, Chrome und IE (* keuch *).

— Charlie
quelle

3

Beste Lösung aller Zeiten. Vergessen Sie nicht, Modernizrs csstransforms-Erkennung zu verwenden :-)

— myfreeweb

9

Seien Sie bei diesem Ansatz sehr vorsichtig. Beim Übersetzen eines Elements wird die GPU verwendet, mit der Pixel als Gleitkomma berechnet werden. Daher können Sie ein Objekt mit einem Subpixel-Wert verschieben und unscharfe Ergebnisse erzielen. Weitere Informationen finden

— Laith

Versuchen Sie transform-style: preserve-3d;, dem übergeordneten Element (Quelle: zerosixthree.se/… ) etwas hinzuzufügen , um unscharfe Ergebnisse aufgrund des Problems "halbes Pixel" zu vermeiden .

— Nickb

12

w3.org scheint deine Methode zu mögen. Sie haben dies auf ihrer Website w3.org/Style/Examples/007/center.en.html#vertical veröffentlicht. Guter Lösungspartner :)

— trve.fa7ad

1

@ n611x007 Sie müssen den linken Stil nicht so einstellen, dass er vertikal ausgerichtet ist. Wenn Sie links und translateX einstellen, wird der Inhalt horizontal ausgerichtet, und bei Einstellung oben und translateY wird der Inhalt vertikal ausgerichtet.

— 1,21 Gigawatt

34

Hinweis: In diesem Beispiel wird die Entwurfsversion des Flexible Box Layout Module verwendet . Es wurde durch die inkompatible moderne Spezifikation ersetzt.

Zentrieren Sie die untergeordneten Elemente einer div-Box, indem Sie die Eigenschaften box-align und box-pack zusammen verwenden.

Beispiel:

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;
}

— Crashalot
quelle

1

Dies ist, wonach ich gesucht habe: neue Ergänzungen zu CSS (dh CSS3), die es einfacher machen als alle alten CSS1 / 2-Hacks. Vielen Dank.

— thaddeusmt

34

Verwenden der Flexbox:

<style>
  .container {
    display: flex;
    align-items: center; /* Vertical align */
    justify-content: center; /* Horizontal align */
  }
</style>

<div class="container">
  <div class="block"></div>
</div>

Zentriert blockinnen containervertikal (und horizontal).

Browserunterstützung: http://caniuse.com/flexbox

— Andrii Nemchenko
quelle

9

ein paar Möglichkeiten:

1. Absolute Positionierung - Sie benötigen eine deklarierte Höhe, damit dies funktioniert:

<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. Verwenden Sie 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
}

Ein detaillierteres Tutorial mit display: table

http://css-tricks.com/vertically-center-multi-lined-text/

— HandiworkNYC.com
quelle

3

Es gibt eine einfache Möglichkeit, ein Div in CSS vertikal und horizontal auszurichten.

Setzen Sie einfach eine Höhe auf Ihr div und wenden Sie diesen Stil an

.hv-center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

Hoffe das hat geholfen.

— Edouard Kombo
quelle

Dies erfordert, dass der Elternteil positioniert ist (dh position: relative).

— Alxs

2

Ich benutze immer das Tutorial aus diesem Artikel, um Dinge zu zentrieren. Es ist großartig

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

Die wesentlichen Regeln sind:

Machen Sie den Container relativ positioniert, was ihn als Container für absolut positionierte Elemente deklariert.
Machen Sie das Element selbst absolut positioniert.
Stellen Sie es mit 'oben: 50%' auf halber Höhe des Behälters ab. (Beachten Sie, dass 50% 'hier 50% der Höhe des Containers bedeutet.)
Verwenden Sie eine Übersetzung, um das Element um die Hälfte seiner eigenen Höhe nach oben zu verschieben. (Die '50% 'in' translate (0, -50%) 'beziehen sich auf die Höhe des Elements selbst.)

— Herr Neo
quelle

1

Sie können translateY (-50%) verwenden, um nur die Y-Achse festzulegen. Setze den Transformationsstil: keep-3d; um unscharfen Text auf halben Pixelwerten zu vermeiden und Herstellerpräfixe für Transformation und Transformationsstil einzuschließen.

— 1,21 Gigawatt

Finden Sie diese Antwort, indem Sie das Beispiel für das w3-Zentrum finden. Dann finden Sie das Beispiel für das w3-Zentrum, indem Sie diese Antwort finden. Excel sagte es am besten; Rundschreiben erkannt!

— Panhandel

0

Versuchen Sie dies auch perfekt zu funktionieren:

html:

   <body>
    <div id="my-div"></div>
   </body>

CSS:

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    display: table-cell;
    vertical-align: middle

}

— Mr.G.
quelle

-1

Sie können vertikal ausrichten, indem Sie ein anzuzeigendes Element festlegen: Inline-Block und dann vertikal ausrichten: Mitte;

— Dave
quelle

1

Eigentlich ist es nicht weit weg. Sie können vor diesem ein weiteres Element hinzufügen (oder ein: before psuedo-Element auf dem übergeordneten Element verwenden). Lassen Sie das neue Element dann eine Höhe von 100% und eine Breite von 1 Pixel sowie einen linken Rand haben: -1 Pixel. Geben Sie ihm dann einen Inline-Block und eine vertikale Ausrichtung: mittlere CSS-Eigenschaft. Dann müssen Sie sicherstellen, dass das übergeordnete Element eine definierte Höhe hat.

— Artvader