Как центрировать текст Test Text
по вертикали? см. hereКак центрировать текст по вертикали?
Я хочу сделать расстояние между текстом и нижней границей, равным расстоянию между текстом и верхней границей. `
Как центрировать текст Test Text
по вертикали? см. hereКак центрировать текст по вертикали?
Я хочу сделать расстояние между текстом и нижней границей, равным расстоянию между текстом и верхней границей. `
Использование line-height: 25px
(будет работать только для однострочного текста).
#a {
display: inline-block;
padding-right: 20px;
padding-left: 15px;
font-family: 'Roboto';
font-size: 12px;
line-height: 25px;
font-weight: bold;
font-stretch: condensed;
COLOR: white;
border-left: 10px solid transparent;
border-bottom: 25px solid;
border-bottom-color: #FF3300;
height: 0;
top: 50%;
}
<span id="a">TEST TEXT</span>
Для одиночного подкладке текста, использовать line-height
, которая равна height
(или округляется до четного числа).
#a {
display: inline-block;
padding-right: 20px;
padding-left: 15px;
font-family: 'Roboto';
font-size: 12px;
font-weight: bold;
font-stretch: condensed;
COLOR: white;
border-left: 10px solid transparent;
border-bottom: 25px solid;
border-bottom-color: #FF3300;
height: 0;
line-height: 26px;
top: 50%;
}
<span id="a">TEST TEXT</span>
:before
Использование псевдо-элемент для левой части, высота строки не будет работать с bottom-border
. Я обновил свой скрипку:
.area {
width: 300px;
height: 300px;
position: relative;
}
.bubble {
position: absolute;
left: 93px;
top: 21px;
width: 135px;
height: 84px;
display: table;
}
.bubble p {
display: table-cell;
vertical-align: middle;
text-align: center;
<div class="area">
<div class="bubble">
<p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p>
</div>
</div>
Можем ли мы увидеть код, пожалуйста? –
да, я отредактировал –
Это однострочный текст? Если да, чем использовать высоту линии, такую же, как высота – Justinas