comment centrer le texte verticalement en html en utilisant css seulement

J'ai un html très simple. en raison de certaines limitations, je ne peux pas modifier le contenu html. Je veux centrer le texte verticalement en utilisant seulement css.comment centrer le texte verticalement en html en utilisant css seulement

<html> 
<head>...</head> 
<body> 
<div>Ops, the webpage is currently not available</div> 
</body> 
</html>

Notez que la taille du code HTML peut être variable. En outre, si le texte ne peut pas être affiché sur une ligne, il doit être divisé en plusieurs lignes.

Est-ce possible?

Source

2010-05-31 stanleyxu2005

Je pense que l'alignement vertical ne fonctionne que pour le contenu d'une table. Pour votre page simple, vous pouvez mettre le contenu dans une table au lieu d'un div pour éviter ce problème.

Il y a quelques solutions de contournement, voir http://phrogz.net/css/vertical-align/index.html

Source

2010-05-31 11:41:05 Matschie

Le nouveau monde de CSS. Vous devez utiliser 'position: absolute' ou' line-height' pour faire quelque chose d'aussi complexe que d'aligner verticalement du contenu. (Ne pas vous critiquer @matschie, juste ne pas comprendre ce que le comité qui a mis en place cette norme était * penser *) –

Eh bien la faute d'IE autrement en utilisant 'display: table' fonctionnerait bien. –

"line-height" a un problème en réalité. si le texte est trop long, le reste est hors de la zone visible. En tout cas, j'ai abandonné. J'utilise une table à la place. – stanleyxu2005

<html> 
<head>... 
    <style type="text/css"> 
    div{ 
     width: 300px; 
     height: 300px; 
     border: solid blue; 
     display: table-cell; 
     vertical-align: middle; 
    } 
    </style> 
</head> 
<body> 
<div>This works fine!</div> 
</body> 
</html>

Source

2010-05-31 11:46:53 Bakhtiyor

Vous pouvez ignorer la largeur, la hauteur et les attributs de bordure. Ils sont utilisés juste pour montrer visuellement la tâche. – Bakhtiyor

Ceci ne fonctionnera pas dans IE 6 et 7. –

Bien que 'table-cell' ne soit pas supporté par IE <= 7. –

Une autre solution possible:

<html> 
<head> 
    <title>Title</title> 
    <style> 
     body {height:100%} 
    </style> 
</head> 
<body> 
<div style="height:100%;"> 
    <div style="position:relative;top:50%;text-align:center">Ops, the webpage is currently not available</div> 
</div> 
</body> 
</html>

Source

2010-05-31 11:48:21

-1

S'il vous plaît utiliser suivant les lignes de code pour centrer le contenu div

<html> 
<head> 
</head> 
<body> 
<i> 
    <div style="text-align:center;"> 
    Hello 
    </div> 
</i> 
</body> 
</html>

Source

2013-06-20 20:32:06

' text-align: center; 'alignera le texte horizontalement, pas verticalement comme le demandeur le demande. – Cinder

-1

Essayez ceci:

.text-tag{ 

    text-align:center; 
    margin-top: 25%; 
}

et d'appliquer "text-tag" au texte que vous souhaitez centrer.

Source

2013-11-02 01:42:01 ENSATE

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.vertical { 
    margin: 0; 
    background: yellow; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%) 
    } 

</style> 
</head> 
<body> 
<div class="vertical"> 
Centered 
</div> 

</body> 
</html>

Source

2014-09-09 18:56:25

comment centrer le texte verticalement en html en utilisant css seulement

Répondre

Questions connexes