Bonjour à tous,
Après avoir essayé à plusieurs reprises mais en vain les différentes solutions de centrage que propose Raphaël dans son article "Comment centrer verticalement sur tous les navigateurs - Alsacréations" remis à jour le 1/4/16, je demande un peu d'aide à notre communauté pour m'aider à centrer verticalement les quelques citations de plusieurs lignes (max. 12) dans l'élément <div id="container"> de mon application xhtml reprise ci-dessous (26 lignes seulement, prêtes à être copiées-collées, css compris). (Le js remplissant dynamiquement cet élément à intervale régulier n'est pas compris car n'ayant pas d'importance pour ma question).
02/08/2016 :
Je croyais avoir trouvé avec "#citation { position: absolute; top: 45%; transform: translateY(-50%); }" et "#container { margin: auto; width: 800px; height: 466px; border: 1px solid; position: relative; }" mais pour peu qu'aucune des lignes ne soit aussi large que le conteneur, le centrage ne se fait pas correctement dans le conteneur (on retrouve le texte à gauche) !
Je croyais aussi avoir trouvé avec "#container { width: 800px; height: 466px; display: table-cell; vertical-align: middle; border: 1px solid; }" mais c'est le conteneur qui s'aligne alors erronément à gauche de la page !
Merci d'avance et bon succès à tous en tout.
Jo VD.
Modifié par JoVD (02 Aug 2016 - 09:10)
Après avoir essayé à plusieurs reprises mais en vain les différentes solutions de centrage que propose Raphaël dans son article "Comment centrer verticalement sur tous les navigateurs - Alsacréations" remis à jour le 1/4/16, je demande un peu d'aide à notre communauté pour m'aider à centrer verticalement les quelques citations de plusieurs lignes (max. 12) dans l'élément <div id="container"> de mon application xhtml reprise ci-dessous (26 lignes seulement, prêtes à être copiées-collées, css compris). (Le js remplissant dynamiquement cet élément à intervale régulier n'est pas compris car n'ayant pas d'importance pour ma question).
02/08/2016 :
Je croyais avoir trouvé avec "#citation { position: absolute; top: 45%; transform: translateY(-50%); }" et "#container { margin: auto; width: 800px; height: 466px; border: 1px solid; position: relative; }" mais pour peu qu'aucune des lignes ne soit aussi large que le conteneur, le centrage ne se fait pas correctement dans le conteneur (on retrouve le texte à gauche) !
Je croyais aussi avoir trouvé avec "#container { width: 800px; height: 466px; display: table-cell; vertical-align: middle; border: 1px solid; }" mais c'est le conteneur qui s'aligne alors erronément à gauche de la page !
Merci d'avance et bon succès à tous en tout.
Jo VD.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ValignTest0</title>
<style>
.bgc { background-color: #0af; }
.center { text-align: center; }
#citation { color: #fff; position: absolute; top: 45%; transform: translateY(-50%); }
#container { margin: auto; width: 800px; height: 466px; border: 1px solid; position: relative; }
#logo { font-size: 7em; margin: auto; height: 1O0px; width: 150px; display: }
</style>
</head>
<body onload="fetchCitation('French');setInterval(fetchCitation,60000,'French')" class="bgc center">
<p id="logo">✑</p>
<p>[ F11: Plein écran ]</p>
<div id="container">
<h1 id="citation">Comment centrer verticalement le présent texte dans son contenant (cadre noir; élément div id='container';
fix height 466px) et centrer horizontalement ce contenant à l'écran dans tous les navigateurs ?
<br />(texte appelé à être changé régulièrement via js)
</h1>
</div>
<p>Je croyais avoir trouvé ...</p>
</body>
</html>
Modifié par JoVD (02 Aug 2016 - 09:10)