Centrer verticalement un texte dans un bloc en %
Bim13
-
Jibap -
Jibap -
Bonjour,
Je cherche à aligner un texte verticalement dans un bloc dont la hauteur est définie en pourcentage. J'ai essayé avec vertical-align:middle, sans succès.
Voici le HTML :
et le CSS :
Je vous remercie d'avance pour votre aide
Je cherche à aligner un texte verticalement dans un bloc dont la hauteur est définie en pourcentage. J'ai essayé avec vertical-align:middle, sans succès.
Voici le HTML :
<a class="tuile" href="#" style="font-size:1.7vw;">TEXTE A ALIGNER</a>
et le CSS :
.tuile
{
margin-top:5%;
border-radius: 10px;
display:inline-block;
width:90%;
height:90%;
text-align:center;
z-index:2;
vertical-align:middle;
}
Je vous remercie d'avance pour votre aide
A voir également:
- Html centrer texte verticalement
- Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
- Editeur html - Télécharger - HTML
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Texte barré whatsapp - Guide
4 réponses
En général pour centrer du texte sur une seule ligne d'un bloc on utilises :
line-height:xx px;
height:xx px;
Donc faute de mieux, je te propose de tester avec ton 90%.
line-height:xx px;
height:xx px;
Donc faute de mieux, je te propose de tester avec ton 90%.
mets ca dans un div
<div id="tuile"><p><a href="#">TEXTE A ALIGNER</a></p></div>
#tuile
{
display:inline-block;
vertical-align:middle;
line-height:20px;
}
#tuile p {
text-align:center;
font-size:20px;
line-height:20px;
}
voila ce sera centré dans son parent: c'est la base, après tu peux rajouter des border padding etc ...
<div id="tuile"><p><a href="#">TEXTE A ALIGNER</a></p></div>
#tuile
{
display:inline-block;
vertical-align:middle;
line-height:20px;
}
#tuile p {
text-align:center;
font-size:20px;
line-height:20px;
}
voila ce sera centré dans son parent: c'est la base, après tu peux rajouter des border padding etc ...
Bonjour Bim13
il existe une solution pour les conteneurs dont la hauteur est spécifiée en % :
----------------------------
En espérant que cela réponde à votre pb.
il existe une solution pour les conteneurs dont la hauteur est spécifiée en % :
<div class="conteneur">
<div class="bloc">
Zone centrée verticalement et horizontalement
</div>
</div>
----------------------------
div.conteneur {
text-align:center; /* centrage horizontal */
border: 1px solid red;
height:30%;
display: table;
}
div.bloc {
display: table-cell;
vertical-align:middle;
}
En espérant que cela réponde à votre pb.
