Чому вертикальне вирівнювання: середина не працює на моєму прольоті чи ділі?

Я намагаюся вертикально центрировать a spanабо divелемент в іншому divелементі. Однак коли я кажу vertical-align: middle, нічого не відбувається. Я спробував змінити displayвластивості обох елементів, і, здається, нічого не працює.

Це те, що я зараз роблю на своїй веб-сторінці:

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Ось jsfiddle реалізації, що показує, що вона не працює: http://jsfiddle.net/gZXWC/

Це здається найкращим способом - минуло деякий час з мого початкового посту, і ось що слід зробити зараз: http://jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

Використання CSS3:

<div class="outer">
   <div class="inner"/>
</div>

Css:

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

Примітка. Це може не працювати в старих IE

Спробуйте це, працює для мене дуже добре:

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

Налаштування висоти рядка на тій же висоті, що вона містить div, також буде працювати

DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

Якщо ви не можете покластися на flexbox ... Помістіть .childу .parentцентр. Працює, коли розміри пікселів невідомі (іншими словами, завжди) і немає проблем з IE9 +.

.parent { position: relative; }

.child {
    position: absolute;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}

<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>

Вам слід надіти vertical-align: middleвнутрішній елемент, а не зовнішній елемент. Встановіть line-heightвластивість зовнішнього елемента, щоб він відповідав heightзовнішньому елементу. Потім встановіть display: inline-blockі line-height: normalна внутрішній елемент. Роблячи це, текст на внутрішньому елементі загортається з нормальною висотою рядка. Працює в Chrome, Firefox, Safari та IE 8+

.main {
    height: 72px;
    line-height:72px;
    border: 1px solid black;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

<div class="main">
    <div class="inner">Vertically centered text</div>
</div>

Скрипка

Я використовував це, щоб вирівняти все, що знаходиться в центрі оболонки, якщо це комусь допомагає - я вважав, що це найпростіше:

div.wrapper {
  /* --- This works --- */
  display: flex;
  /* Align Vertically */
  align-items: center;
  /* Align Horizontally */
  justify-content: center;
  /* --- ---------- ----- */
  width: 100%;
  height:100px;
  background-color: blue;
}
div.inner {
  width: 50px;
  height: 50px;
  background-color: orange;
}

<div class="wrapper">
  <div class="inner">
  </div>
</div>

Тут ви маєте приклад двох способів вертикального вирівнювання. Я їх використовую, і вони працюють досить добре. Один використовує абсолютне позиціонування, а другий використовує флексбокс .

Приклад вертикального вирівнювання

Використовуючи flexbox, ви можете вирівняти елемент самостійно всередині іншого елемента за display: flex;допомогою align-self. Якщо вам потрібно вирівняти його також горизонтально, можна використовувати align-itemsі justify-contentв контейнері.

Якщо ви не хочете використовувати flexbox, ви можете використовувати властивість позиції. Якщо ви зробите контейнер відносним та вмістом абсолютним, вміст зможе вільно переміщатися всередині контейнера. Тож якщо ви використовуєте top: 0;і left: 0;вміст, він буде розташований у верхньому лівому куті контейнера.

Потім, щоб вирівняти його, потрібно просто змінити верхню і ліву посилання на 50%. Це розмістить вміст у центрі контейнера у верхньому лівому куті вмісту.

Тому вам потрібно виправити цей переклад вмісту наполовину його розміру вліво і вгорі.

ось чудова стаття про те, як вестично вирівняти .. Мені подобається поплавковий шлях.

http://www.vanseodesign.com/css/vertical-centering/

HTML:

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

І відповідний стиль:

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

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

Ми встановлюємо батьківський div для відображення у вигляді таблиці, а дочірнє діло для відображення у вигляді комірки таблиці. Потім ми можемо використовувати вертикальне вирівнювання дочірнього діва та встановити його значення на середину. Все, що знаходиться всередині цього дочірнього діва, буде вертикально по центру.

Це просто. Просто додайте display:table-cellу свій основний клас.

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

Перевірте цю jsfiddle !

Ось останнє найпростіше рішення - не потрібно нічого змінювати, просто додайте три рядки правил CSS у свій контейнер діва, куди ви хочете зосередитись. Я люблю Flex Box#LoveFlexBox

.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
  
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}

<div class="main">
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Бонус

justify-contentзначення може бути встановлено в наступні кілька варіантів:

• flex-start, яка вирівняє дочірню поділку до місця, де починається гнучкий потік у його батьківському контейнері. У цьому випадку він залишиться на вершині.

• center, яка вирівняє дочірню поділку до центру її батьківського контейнера. Це дійсно акуратно, тому що вам не потрібно додавати додатковий дів, щоб обгортати всіх дітей, щоб помістити обгортку в батьківський контейнер, щоб центрировать дітей. Через це, це справжній вертикальний центр ( column flex-directionаналогічно, якщо ви зміните flow-directionна row, він стане горизонтально центрованим.

• flex-end, яка вирівняє дочірню поділку до місця, де закінчується потік згину в його батьківському контейнері. У цьому випадку він переміститься вниз.

• space-between, яка поширить усіх дітей від початку потоку до кінця потоку. Якщо в демонстраційній версії я додав ще одну дітку, щоб показати, що вони розповсюджені.

• space-around, подібний до space-between, але з половиною місця на початку та в кінці потоку.

Оскільки vertical-alignпрацює, як очікувалося, на а td, ви можете поставити одну клітинку tableв, divщоб вирівняти її вміст.

<div>
    <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
        Aligned content here...
    </td></tr></table>
</div>

Клункі, але працює, наскільки я можу сказати. Це може не мати недоліків інших обхідних шляхів.

Просто помістіть вміст всередину таблиці висотою 100% і встановіть висоту для головного поділу

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

Щоб вертикально зафіксувати проміжок або елемент div в іншому ділі, додайте положення відносно батьківського діва та абсолютне положення дочірнього поділу. Тепер дочірній дів може бути розміщений у будь-якому місці всередині div.Приклад нижче центрів як горизонтально, так і вертикально.

<div class="parent">
    <div class="child">Vertically and horizontally centered child div</div>
</div>

css:

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Це сучасний підхід, і він використовує функціонал CSS Flexbox. Тепер ви можете вертикально вирівняти вміст у своєму батьківському контейнері, просто додавши ці .mainконтейнери до цього контейнера

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
}

І вам добре піти!