Выровнять h2 вертикально снизу

Question

Я изучаю html и css, начиная с основ. Я кодирую простой сайт. У меня проблема с выравниванием h2 по вертикали вниз.

То, что я хочу достичь, это заголовок с фоновым изображением (высота 240 пикселей), который имеет черную полосу с текстом: «любовь огурцы», выровненная до нижней части. Я пробовал несколько решений, но они не работали.

Текст должен быть «9 причин, почему вы должны любить огурцы».

Вот соответствующие CSS и HTML:

.body { 
 
    clear: both; 
 
    width: 800px; 
 
    -webkit-border-radius: 15px; 
 
    -moz-border-radius: 15px; 
 
    border-radius: 15px; 
 
} 
 

 
header { 
 
    height: 240px; 
 
    margin: 1em auto 3em; 
 
    background-image: url("https://media.mercola.com/ImageServer/Public/2014/August/cucumber-health-benefits-fb.jpg"); 
 
    background-size: cover; 
 
    text-align: center; 
 

 
    font-family: 'Lobster', Georgia, Times, serif; 
 
} 
 

 
#caption { 
 
    width: 100%; 
 
    height: 70px; 
 
    line-height: 70px; 
 

 
    background: #191919; 
 
    color: #ffffff; 
 
    font-size: 2em; 
 
    letter-spacing: 1px; 
 

 
    border-bottom-left-radius: 15px; 
 
    -webkit-border-bottom-left-radius: 15px; 
 
    -moz-border-radius-bottomleft: 15px; 
 

 
    border-bottom-right-radius: 15px; 
 
    -webkit-border-bottom-right-radius: 15px; 
 
    -moz-border-radius-bottomright: 15px;

<header class="body"> 
 
\t <h2 id="caption">Love cucumbers <3</h2> 
 
</header>

Answer 1

Вы можете сделать это с использованием положения, относительного для заголовка и положения, абсолютного для h2. Пожалуйста, смотрите ниже обновленный код

.body { 
 
    clear: both; 
 
    width: 800px; 
 
    -webkit-border-radius: 15px; 
 
    -moz-border-radius: 15px; 
 
    border-radius: 15px; 
 
} 
 

 
header { 
 
    height: 240px; 
 
    margin: 1em auto 3em; 
 
    background-image: url("https://media.mercola.com/ImageServer/Public/2014/August/cucumber-health-benefits-fb.jpg"); 
 
    background-size: cover; 
 
    text-align: center; 
 

 
    font-family: 'Lobster', Georgia, Times, serif; 
 
    position:relative; 
 
} 
 

 
#caption { 
 
    width: 100%; 
 
    height: 70px; 
 
    line-height: 70px; 
 

 
    background: #191919; 
 
    color: #ffffff; 
 
    font-size: 2em; 
 
    letter-spacing: 1px; 
 
    position:absolute; 
 
    bottom:0px; 
 
    margin-bottom:0px; 
 
    border-bottom-left-radius: 15px; 
 
    -webkit-border-bottom-left-radius: 15px; 
 
    -moz-border-radius-bottomleft: 15px; 
 

 
    border-bottom-right-radius: 15px; 
 
    -webkit-border-bottom-right-radius: 15px; 
 
    -moz-border-radius-bottomright: 15px; }

<header class="body"> 
 
\t <h2 id="caption">Love cucumbers <3</h2> 
 
</header>

Answer 2

Вы должны поставить высоту строки в подписи с той же высоте, что и заголовок, как это.

#caption { 
    width: 100%; 
    height: 100%; 
    line-height: 240px; 
} 

Answer 3

Вот это working fiddle.

Я в основном добавил эти свойства в .body class

display: table; 
    position: relative; 
    height: 200px; /* Edit this with as you wish */ 

И к #caption id

display: table-cell; 
    vertical-align: bottom; 

PS: Свойство фонового изображения не работает на table-cell элементов, поэтому я применил background- изображение на body tag.