CSS вертикальное выравнивание текста в DIV

Question

Что касается https://jsfiddle.net/postiffm/74cxr092/

> <div id="Tagline"> 
>  I'm in the center. 
>  <div id="TaglineLeft"></div> 
>  <div id="TaglineRight"><a href="tel:1-734-123-4567">I am a phone #</a></div> </div> 

Как выровнять текст в TaglineRight поэтому он имеет некоторое пространство над ним, как текст в центральной секции? Я пробовал некоторые дополнения и маржи, но ничего не работает.

Спасибо.

Answer 1

добавить строку-высоту: 30px; to #TaglineRight a

Answer 2

Вместо того, чтобы играть с позицией: абсолютная/относительная. Рассмотрите возможность использования дисплея: сгибать

проверить это решение

#Tagline { 
 
    color: white; 
 
    font-weight: normal; 
 
    letter-spacing: 2px; 
 
    text-align: center; 
 
    margin-bottom: 10px; 
 
    border: 0 solid #ff9706; 
 
    border-radius: 7px; 
 
    background-color: #ff9706; 
 
    display: flex; 
 
    height:30px; 
 
    line-height: 30px; 
 
    justify-content: space-between; 
 
} 
 
#TaglineLeft, 
 
#TaglineRight { 
 
    color: white; 
 
    height: 100%; 
 
    width: 30%; 
 
    border-radius: 7px; 
 
    text-align: center; 
 

 
} 
 
#TaglineLeft { 
 

 
    margin-top: 0px; 
 
    background-color: #6673aa; 
 
    order: -1; 
 

 
} 
 
#TaglineRight { 
 
    border: 0 solid #7e922e; 
 
    background-color: #7e922e; 
 
} 
 
#TaglineRight a { 
 
    color: white; 
 
    letter-spacing: 1px; 
 
    text-decoration: none; 
 
}

<div id="Tagline"> 
 
    I'm in the center. 
 
    <div id="TaglineLeft">left line</div> 
 
    <div id="TaglineRight"><a href="tel:1-123-123-1234">I am a phone #</a> 
 
    </div> 
 
</div>

Надеется, что это помогает

Answer 3

#TaglineLeft, #TaglineRight { 
position: absolute; 
color: white; 
font-weight: normal; 
text-align: center; 
height: 100%; 
width: 30%; 
top: 0; 
border-radius: 7px; 
height: 20px; 
padding: 5px; 
} 

Вы можете добавить высоту: 20px; и обивка: 5px; к #TaglineLeft, #TaglineRight { класса

Answer 4

старый способ моды для лечения дочернего элемента в качестве данных таблицы с помощью набора его display: table-cell, vertical-align: middle; & установить его родитель display: table;. таким образом вы можете изменить высоту родителя на все, что вам нравится, и дочерний элемент всегда будет находиться в вертикальном положении. а не как решения CSS3, он будет работать и в старых браузерах, и, конечно же, с поддержкой браузера. https://jsfiddle.net/ryf0w7rp/ - попробуйте изменить высоту элемента «#Tagline» от 20px до другого значения и увидеть результат.

* Если вы не хотите, чтобы основные элементы обертки использовали display: table, чтобы вы могли создать другой уровень элемента для использования display: table.

* для примера я сделал решение только для элемента «#TaglineRight», который имеет внутренний элемент <a>. чтобы другие элементы работали одинаково, добавьте одну и ту же структуру и установите CSS в нужные элементы.