aligner Verticalement divs texte avec taille de police réactive dans un div

Je cette div:aligner Verticalement divs texte avec taille de police réactive dans un div

et j'ai essayé de faire la taille de la police du texte réactif en utilisant ce code:

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

Si je fais l'écran plus petit les en-têtes ne sont pas alignés verticalement:

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; 
}

J'ai essayé de changer le CSS pour les en-têtes comme ceci:

#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; 
}

mais maintenant il ressemble à ceci:

Source

2016-07-28 Apolo Radomer

Veuillez suivre [Les astuces CSS - Centrer en CSS: Un guide complet] (https://css-tricks.com/centering-css-complete-guide/). Et s'il vous plaît, n'utilisez pas "calc". –

Vous devrez peut-être définir la hauteur de la ligne comme la hauteur. Je vais faire un exemple dans quelques minutes. –

@RichardLindhout Je l'ai fait mais ça n'a pas fonctionné pour les deux en-têtes –

Vous devez diver le contenu au centre. Voir l'exemple ci-dessous. Avoir seulement testé cela dans 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>

Code final

<!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>

Source

2016-07-28 12:22:34

J'ai testé le vôtre. Cela fonctionne bien sur l'extrait mais cela ne fonctionne pas quand je sauvegarde le fichier et ouvre sur chrome –

Hmm .. êtes-vous sûr que vous avez le même html et css? –

Oui. Exactement le même. –

Ceci est un problème de glyphe de police et est due au fait que ne soit pas aligné le gylph noir caractère directement sur la gauche de la glyphe bloc.

Si vous voyez l'exemple ci-dessous, vous pouvez définir que l'espace réel sur le côté gauche du bloc glyphe avant le glyphe caractère.

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>

Ceci est un problème-conception de la police ... et il est sur le but ... pour que les lettres ne groupe pas automatiquement ensemble.

La quantité d'espace est proportionnelle à la taille de la police et chaque police, donc il n'y a pas de valeur unique que vous pouvez utiliser pour les aligner.

Ce qui fonctionne pour une police ne fonctionnera pas pour la suivante.

Source

2016-07-28 13:48:38

aligner Verticalement divs texte avec taille de police réactive dans un div

Répondre

Questions connexes