Вертикальное выравнивание не работает на div

Question

Я пытаюсь вертикально выровнять div, но по какой-то причине он вообще не работает. Что я делаю не так?

body { 
 
border: 1px solid red; 
 
height: 500px; 
 
} 
 
#contactUs { 
 
border: 1px solid blue; 
 
vertical-align: bottom; 
 
}

<div id = "contactUs"> Contact Us </div>

Примечание: Я не хочу абсолютных ответов позиционирования.

Answer 1

Вертикальное усилие выравнивания не работает, потому что vertical-align свойство применяется только к инлайн и таблицы клеточных элементов. (See the spec for details.)

Вы можете выровнять #contactus DIV в нижней части содержащего блока (body) с flexbox.

body { 
 

 
    display: flex;    /* convert element to flex container */ 
 
    flex-direction: column;  /* create a vertical alignment for child elements */ 
 
    justify-content: flex-end; /* align child elements at the end of the container */ 
 

 
    border: 1px solid red; 
 
    height: 500px; 
 
} 
 

 
#contactUs { border: 1px solid blue; }

<div id = "contactUs"> Contact Us </div>

Чтобы узнать больше о Flexbox визита:

• Methods for Aligning Flex Items
• Using CSS flexible boxes ~ MDN
• A Complete Guide to Flexbox ~ CSS-Tricks
• What the Flexbox?! ~ YouTube видео учебник

---

Обратите внимание, что Flexbox поддерживается всеми основными браузерами, except IE 8 & 9. Некоторые недавние версии браузера, такие как Safari 8 и IE10, требуют vendor prefixes. Чтобы быстро добавить все префиксы, которые вам нужны, разместите свой CSS на левой панели здесь: Autoprefixer.

Answer 2

Если вам нужен только текст «Связаться с нами» по вертикали, вы можете установить высоту линии #contactUs на 500px.

line-height:500px;