Jak wyrównać pionowo elementy w div?

Teraz, gdy obsługa flexbox rośnie, CSS zastosowany do elementu zawierającego będzie pionowo wyśrodkowywał zawarty element:

.container {        
    display: flex;
    align-items: center;
}

Użyj prefiksu wersji, jeśli chcesz również kierować Explorer 10 i stare (

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

Użyłem tego bardzo prostego kodu:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Oczywiście, niezależnie od tego, czy użyjesz .class czy #id, wynik nie ulegnie zmianie.

 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

U mnie zadziałało:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

Technika od mojego przyjaciela:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DEMO tutaj

Element wyrównujący w pionie i poziomie

Użyj jednego z nich, wynik będzie taki sam:

1. Bootstrap 4
2. CSS3

1. Bootstrap 4.3 +

Dla wyrównania pionowego: d-flex align-items-center

Dla wyrównania poziomego: d-flex justify-content-center

Dla pionu i poziomu d-flex align-items-center justify-content-center

.container {
    height: 180px;
    width:100%;
    background-color: blueviolet;
}

.container > div {
  background-color: white;
  padding: 1rem;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center container">
  <div>I am in Center</div>
</div>

2. CSS3

.container {
    height: 180px;
    width:100%;
    background-color: blueviolet;
}

.container > div {
  background-color: white;
  padding: 1rem;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container center">
    <div>I am in Center</div>
</div>

Aby ustawić elementy blokowe na środku (działa w IE9 i wyżej), potrzebny jest wrapper div:

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

Wszystkie z nich muszą być wyrównane pionowo w obrębie div

Wyrównane Jak ? Wierzchołki obrazów wyrównane do góry tekstu?

Jeden z obrazów musi być bezwzględnie umieszczony w div.

Absolutnie umieszczony w stosunku do DIV? Może mógłbyś naszkicować to, czego szukasz...?

Fd opisał kroki dla absolutnego pozycjonowania, a także dostosowanie wyświetlacza H1 element taki, że obrazy pojawią się w linii z nim. Do tego dodam, że możesz wyrównać obrazy za pomocą vertical-align style:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

...to by umieścić nagłówek i obrazy razem, z górnej krawędzi wyrównane. Istnieją inne opcje wyrównania; zobacz dokumentację . Możesz również uznać za korzystne upuszczenie DIV I przeniesienie obrazów wewnątrz elementu H1 - zapewnia to wartość semantyczną do kontenera i eliminuje potrzebę dostosowania wyświetlania H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

Użyj tej formuły, a będzie działać zawsze bez pęknięć:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

Prawie wszystkie metody muszą określać wysokość, ale często nie mamy żadnych wysokości.
Oto sztuczka linii CSS3 3, która nie wymaga znajomości wysokości.

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Jest obsługiwana nawet w IE9.

Z przedrostkami sprzedawcy:

.element {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Źródło: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Moja sztuczka polega na umieszczeniu wewnątrz div tabeli z 1 wierszem i 1 kolumną, Ustaw 100% szerokości i wysokości oraz właściwością vertical-align: middle.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Fiddle: http://jsfiddle.net/joan16v/sbqjnn9q/

#3 sposoby na wyśrodkowanie div dziecka w rodzicu div

• Metoda Pozycjonowania Bezwzględnego
• Metoda Flexbox

• Metoda Transform / Translate

  

  Demo

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>

Używając CSS do środka pionowego, możesz pozwolić, aby zewnętrzne kontenery działały jak Tabela, a zawartość jako komórka tabeli. W tym formacie obiekty pozostaną wyśrodkowane. :)

Zagnieżdżałem wiele obiektów w JSFiddle dla przykładu, ale podstawowa idea jest taka:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

Wiele obiektów przykład:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Wynik

Https://jsfiddle.net/martjemeyer/ybs032uc/1/

Jak na dzisiaj, Znalazłem nowe obejście do pionowego wyrównywania wielu linii tekstu w div za pomocą CSS3 (i używam również systemu siatki bootstrap v3, aby upiększyć interfejs), co jest jak poniżej:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Zgodnie z moim zrozumieniem, bezpośredni rodzic tekstu zawierającego element musi mieć pewną wysokość. Mam nadzieję, że tobie też pomoże. Dzięki!

Domyślnie H1 jest elementem blokowym i będzie renderowany w linii po pierwszym img i spowoduje, że drugi img pojawi się w linii po bloku.

Aby to powstrzymać, możesz ustawić H1 tak, aby miało zachowanie przepływu w linii:

#header > h1 { display: inline; }

Jeśli chodzi o absolutnie pozycjonowanie img wewnątrz div, musisz ustawić div zawierający, aby miał "znany rozmiar", zanim to zadziała poprawnie. Z mojego doświadczenia wynika również konieczność zmiany atrybutu position z domyślna pozycja: relative działa dla mnie:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Jeśli możesz to uruchomić, możesz spróbować stopniowo usunąć atrybuty wysokości, szerokości, pozycji z div.nagłówek, aby uzyskać minimalne wymagane atrybuty, aby uzyskać pożądany efekt.

UPDATE:

Oto kompletny przykład, który działa na Firefoksie 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>

Możemy użyć obliczenia funkcji CSS, aby obliczyć rozmiar elementu, a następnie odpowiednio ustawić element potomny.

Przykład HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

I CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Demo stworzone tutaj: https://jsfiddle.net/xnjq1t22/

To rozwiązanie działa dobrze z responsywnym div height i width również.

Uwaga: funkcja calc nie jest testowana pod kątem zgodności ze starymi przeglądarkami.

Moim nowym ulubionym sposobem jest użycie siatki CSS:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}

<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>

Używanie tylko klasy Bootstrap:

• div: class="container d-flex"
• element wewnątrz div: class="m-auto"

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" crossorigin="anonymous">

<div class="container d-flex mt-5" style="height:110px; background-color: #333;">
  <h2 class="m-auto"><a href="https://hovermind.com/">H➲VER➾M⇡ND</a></h2>
</div>

Wystarczy użyć tabeli jednokomórkowej wewnątrz div! Wystarczy ustawić wysokość komórki i tabeli i z do 100% i można użyć wyrównania pionowego.

Jednokomórkowy stół wewnątrz div obsługuje vertical-align i jest wstecznie kompatybilny z powrotem do epoki kamienia!

Używając display flex, najpierw musisz owinąć pojemnik elementu / align = "left" /

<div class="outdiv">
      <div class="indiv">
         <span>test1</span>
         <span>test2</span>
      </div>
    </div>

Następnie zastosuj następujący css do wrappera div lub outdiv w moim przykładzie

.outdiv {
    display: flex;
    justify-content:center;
    align-items:center;
}

Od ponad roku używam następującego rozwiązania (bez pozycjonowania i bez wysokości linii), działa również z IE 7 i 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

To jest moje osobiste rozwiązanie dla elementu i wewnątrz div

Przykład JSFiddle

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

Dla mnie to działało w ten sposób:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

Element "a" przekształcił się w przycisk, używając klas Bootstrap i jest teraz wyśrodkowany pionowo wewnątrz zewnętrznego "div".

Tylko to:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

Jednokomórkowy stół wewnątrz div obsługuje vertical-align i jest wstecznie kompatybilny z powrotem do epoki kamienia!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

Oto tylko inne (responsywne) podejście:

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

Http://jsfiddle.net/herrfischerhamburg/JcVxz/

<div id="header" style="display: table-cell; vertical-align:middle;">

...

Lub CSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

Zasięg Przeglądarki