Як вертикально вирівняти елементи у діві?

У мене є дів з двома зображеннями та ан h1. Усі вони повинні бути вертикально вирівняні в межах діва, поруч.

Одне з зображень потрібно absoluteрозмістити в розділі.

Для чого потрібен CSS для роботи у всіх звичайних браузерах?

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

О, ця проблема популярна. Він заснований на непорозумінні у vertical-alignвласності. Ця чудова стаття пояснює це:

Розуміння vertical-align, або "Як (не) вертикально центрувати вміст" Гевіна Кістнера.

"Як зробити центр у CSS" - це чудовий веб-інструмент, який допомагає знайти необхідні атрибути центрування CSS для різних ситуацій.

Коротше кажучи _{^{(і щоб запобігти гниттю зв'язку)}} :

• Вбудовані елементи (і лише вбудовані елементи) можуть бути вертикально вирівняні в їх контексті через vertical-align: middle. Однак «контекст» - це не вся висота батьківського контейнера, це висота рядка тексту, в якому вони є. Приклад jsfiddle
• Для блокових елементів вертикальне вирівнювання складніше і сильно залежить від конкретної ситуації:
  • Якщо внутрішній елемент може мати фіксовану висоту , ви можете зробити свою позицію absoluteі вказати його height, margin-topі topстановище. Приклад jsfiddle
  • Якщо по центру елемент складається з однієї лінії, а його батьківська висота зафіксована, ви можете просто встановити контейнер line-heightдля заповнення його висоти. Цей метод є досить універсальним на мій досвід. Приклад jsfiddle
  • … Є більше таких особливих випадків.

Тепер, коли підтримка flexbox збільшується, цей CSS, застосований до елемента, що містить елемент, буде вертикально розташовувати містити елемент:

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

Використовуйте попередньо встановлену версію, якщо вам також потрібно націлити браузер Explorer 10 та старі (<4.4) Android:

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

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

    align-items: center;
}

Я використовував цей дуже простий код:

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

Очевидно, що ви використовуєте a .classчи an #id, результат не зміниться.

Це працювало для мене:

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

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

Техніка від мого друга:

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 тут

Для розміщення блокових елементів у центрі (працює в IE9 і вище) потрібна обгортка div:

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

Усі вони повинні бути вертикально вирівняні в межах діва

Як вирівняли ? Вершини зображень, вирівняних у верхній частині тексту?

Одне із зображень повинно бути розміщене в розділі.

Абсолютно розташований відносно DIV? Можливо, ви могли б намалювати те, що шукаєте ...?

fd описав кроки для абсолютного позиціонування, а також налаштування відображення H1елемента таким чином, що зображення будуть відображатися в рядку з ним. До цього додам, що ви можете вирівняти зображення за допомогою vertical-alignстилю:

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

... це поєднає заголовки та зображення разом, а верхні краї вирівняні. Існують інші варіанти вирівнювання; дивіться документацію . Можливо, вам також буде корисно скинути DIV і перемістити зображення всередині H1елемента - це надає контейнеру смислове значення і усуває необхідність коригування відображення H1:

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

Використовуйте цю формулу, і вона буде працювати завжди без тріщин:

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

Майже у всіх методах потрібно вказати висоту, але часто ми не маємо висоти.
Отже, ось трюк CSS3 3, для якого не потрібно знати висоту.

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

Він підтримується навіть в IE9.

з його префіксами:

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

Джерело: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Двома способами можна вирівняти елементи вертикально і горизонтально

1. Завантаження 4
2. CSS3

1. завантажувальна програма 4.3.X

для вертикального вирівнювання: d-flex align-items-center

для горизонтального вирівнювання: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}

<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 bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;  // verticall center
    justify-content: center; // horizontally center

    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}

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

Моя хитрість полягає в тому, щоб помістити всередині таблиці таблицю з 1 рядком та 1 стовпцем, встановити 100% ширини та висоти та властивості вертикально-вирівняти: посередині.

<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 способи перетворити дочірню дітьку в батьківський дів

• Абсолютний метод позиціонування
• Метод Flexbox

• Метод перетворення / перекладу

  

  Демо

/* 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>

Використовуючи CSS до вертикального центру, ви можете дозволити зовнішнім контейнерам діяти як таблиця, а вміст - як комірка таблиці. У такому форматі ваші об'єкти залишатимуться в центрі. :)

Я вклав кілька прикладів у JSFiddle для прикладу, але основна ідея така:

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

Приклад декількох об'єктів:

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

Результат

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

За замовчуванням h1 є блоковим елементом і відображатиметься у рядку після першого img, а другий img з'явиться у рядку, що слідує за блоком.

Щоб запобігти цьому, ви можете встановити h1 таким чином, щоб він був поточним:

#header > h1 { display: inline; }

Що стосується абсолютного розміщення img всередині div , вам потрібно встановити містить div таким чином, щоб мати "відомий розмір", перш ніж це буде працювати належним чином. На мій досвід, вам також потрібно змінити атрибут позиції подалі від за замовчуванням - позиція: відносно працює для мене:

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

Якщо ви зможете працювати так, ви можете спробувати поступово видалити атрибути висоти, ширини, позиції з div.header, щоб отримати мінімально необхідні атрибути, щоб отримати потрібний ефект.

ОНОВЛЕННЯ:

Ось повний приклад, який працює на Firefox 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>

Ми можемо використовувати обчислення функції CSS для обчислення розміру елемента, а потім відповідно розташувати дочірній елемент.

Приклад HTML:

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

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

Демо створено тут: https://jsfiddle.net/xnjq1t22/

Це рішення добре працює з чуйною div heightі widthтакож.

Примітка: Функція calc не перевіряється на сумісність зі старими браузерами.

На сьогоднішній день я знайшов нове вирішення для вертикального вирівнювання декількох текстових рядків у розділі за допомогою CSS3 (і я також використовую сітчасту систему bootstrap v3 для прикраси інтерфейсу), яка наведена нижче:

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

Як я розумію, безпосередній батьківський елемент, що містить текст, повинен мати деяку висоту. Сподіваюся, це теж допоможе вам. Дякую!

Мій новий улюблений спосіб це зробити за допомогою сітки 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>

Просто використовуйте одноклітинне таблицю всередині div! Просто встановіть висоту комірки та таблиці та до 100%, і ви можете використовувати вертикальне вирівнювання.

Одноклітинна таблиця всередині діва обробляє вертикальне вирівнювання і є сумісною назад до кам'яного віку!

Я використовую наступне рішення (без позиціонування та без висоти рядка) вже більше року, він також працює з IE 7 та 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>

Це моє особисте рішення для елемента i всередині діва

Приклад 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;
}

Для мене це спрацювало так:

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

Елемент "a" перетворюється на кнопку, використовуючи класи Bootstrap, і тепер він вертикально центрований всередині зовнішнього "div".

використовуючи дисплейний флекс, спочатку потрібно загортати контейнер предмета, який потрібно вирівняти.

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

потім застосуйте наступний css до обгорткового div або outdiv у моєму прикладі

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

Тільки в цьому:

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

Одноклітинна таблиця всередині діва обробляє вертикальне вирівнювання і є сумісною назад до кам'яного віку!

<!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>

Ось лише інший (чуйний) підхід:

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/

Я хлопець .NET, який щойно зайнявся веб-програмуванням. Я не використовував CSS (ну, трохи). Я використовував трохи JavaScript, щоб здійснити вертикальне центрування разом з функцією .css jQuery.

Я просто розміщую все з мого тесту. Це, мабуть, не надто елегантно, але це працює поки що.

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

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

...

або CSS

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

Покриття браузера