вертикального выравнивания текста дивы с отзывчивым размером шрифта в пределах DIV

У меня есть этот DIV:вертикального выравнивания текста дивы с отзывчивым размером шрифта в пределах DIV

и я попытался сделать размер шрифта текста отзывчивым, используя этот код:

font-size:calc(xx + 1.5vw);

Если я сделать экран меньше, заголовки не выровнены по вертикали:

HTML:

<div id="topsection"> 
<div id="header1">HEADER 1</div> 
<div id="header2">Header 2</div> 
</div>

CSS:

#header1 { 
margin-left:220px; 
font-size:calc(20px + 1.5vw); 
color:#fff; 
} 

#header2 { 
color: #fff; 
margin-left:220px; 
font-size:calc(9px + 1.5vw); 
} 

#topsection { 
background-color:#222939; 
width:100%; 
height:75px; 
z-index:1; 
position:absolute; 
top:10px; 
left:0; 
color:white; 
}

Я попытался изменить CSS для заголовков, как это:

#header1 { 
display: inline-block; 
vertical-align: middle; 
margin-left:220px; 
font-size:calc(20px + 1.5vw); 
color:#fff; 
} 

#header2 { 
display: inline-block; 
vertical-align: middle; 
margin-left:220px; 
font-size:calc(9px + 1.3vw); 
color: #fff; 
}

, но теперь она выглядит следующим образом:

источник

2016-07-28 Apolo Radomer

Пожалуйста, следуйте инструкциям [CSS Tricks - Центрирование в CSS: Полное руководство] (https://css-tricks.com/centering-css-complete-guide/). И, пожалуйста, не используйте 'calc'. –

Возможно, вам потребуется установить высоту линии так же, как и высоту. Я приведу пример в течение нескольких минут. –

@RichardLindhout Я сделал это, но это не сработало для обоих заголовков –

Вам нужен контент div в центр посередине. См. Пример ниже. Тестировали это только в Chrome.

.toolbar{ 
 
background-color:#222939; 
 
width:100%; 
 
height:195px; 
 
line-height:195px; 
 
z-index:1; 
 
position:absolute; 
 
top:0; 
 
left:0; 
 
color:white; 
 

 

 
} 
 
.toolbar .content{ 
 
display:inline-block; 
 
vertical-align: middle; 
 
} 
 
.toolbar .title { 
 

 

 
line-height:1; 
 

 
font-size:calc(20px + 1.5vw); 
 
color:#fff; 
 
} 
 

 
.toolbar .subtitle { 
 

 

 
line-height:1; 
 
font-size:calc(9px + 1.5vw); 
 
color: #fff; 
 
}

<div class="toolbar"> 
 
<div class="content"> 
 
<div class="title">HEADER 1</div> 
 
<div class="subtitle">Header 2</div> 
 
</div> 
 
</div>

Окончательный код

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     .toolbar{ 
background-color:#222939; 
width:100%; 
height:195px; 
line-height:195px; 
z-index:1; 
position:absolute; 
top:0; 
left:0; 
color:white; 
} 
.toolbar .content{ 
display:inline-block; 
vertical-align: middle; 
} 
.toolbar .title { 
line-height:1; 
font-size:calc(20px + 1.5vw); 
color:#fff; 
} 

.toolbar .subtitle { 
line-height:1; 
font-size:calc(9px + 1.5vw); 
color: #fff; 
} 
    </style> 

    </head> 
<body> 
    <div class="toolbar"> 
<div class="content"> 
<div class="title">HEADER 1</div> 
<div class="subtitle">Header 2</div> 
</div> 
</div> 
</body> 
</html>

источник

2016-07-28 12:22:34

Я проверил ваш. Он отлично работает на фрагменте, но он не работает, когда я сохраняю файл и открываю его на chrome. –

Хм .. вы уверены, что у вас одинаковые html и css? –

Да. Точно так же. –

Это вопрос глифов шрифта и из-за того, что черный gylph характер не выровнены непосредственно вдоль слева от глиф блок.

Если вы видите пример ниже, вы можете установить, что есть фактическое пространство на левую сторону блока глифа перед символом глифа .

h1, h3 { margin: 0; margin-bottom: 1px; margin-left: 150px; font-family: monospace; } h1 { font-size: 144px; } h3 { font-size: 72px; } span { background: red; }

<H1><span>H</span></H1> <H3><span>H</span></H3>

Это шрифт-дизайн проблема ... и это нарочно ... так что письма автоматически не кучу вместе.

Размер пространства пропорционален размеру шрифта и каждого шрифта, поэтому нет единственного значения, которое вы можете использовать для выравнивания.

Что работает для одного шрифта, не будет работать для следующего.

источник

2016-07-28 13:48:38

вертикального выравнивания текста дивы с отзывчивым размером шрифта в пределах DIV

ответ

Смежные вопросы