Mit CSS 3 vertikal ausrichten

Question 1

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

Question 2

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 *).

Question 3

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

Question 4

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

Question 5

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/

Question 6

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.

Question 7

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.)

Question 8

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

}

Question 9

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

Answer 1

74

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

css html vertical-alignment alignment 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

Answer 2

1

Es ist kein CSS 3 - Wege ...

tho

Answer 3

2

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

Šime Vidas

Answer 4

3

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

tho

Answer 5

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

Answer 6

6

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

tho

Answer 7

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

Answer 8

3

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

myfreeweb

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

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

Answer 16

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/

Answer 17

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

Answer 18

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

Alxs

Answer 19

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.)

Answer 20

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

Answer 21

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

Answer 22

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

}

Answer 23

-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

Answer 24

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

Mit CSS 3 vertikal ausrichten

Antworten: