28172 sujets

CSS et mise en forme, CSS3

Centrage auto de 3 textes haut/milieu/bas de l'écran

Bonjour.

Je cherche un moyen simple d'aligner verticalement 3 blocs de textes : 1 en haut de la page, 1 au milieu et 1 en bas, sans entrer de valeurs en pixels et quelle que soit la taille de l'écran.

<div id="test">
	<p class="test_haut">S'affiche en haut de l'ecran</p>
	<p class="test_milieu">S'affiche au milieu de l'ecran</p>
	<p class="test_bas">S'affiche en bas de l'ecran</p>
</div>


Merci.
Je ne connaissais pas cette propriété, très intéressante, mais je n'arrive pas à obtenir ce que je veux...

----------

J'ai essayé sous forme de tableau à 3 lignes avec height et min-height à 100 %. Un background coloré prouve que les cellules du tableau s'étirent bien sur toute la hauteur de la page, donc, quelle que soit la définition de l'écran, mais les textes à l'intérieur refusent désespérément de s'aligner en haut (pour le supérieur) et en bas (pour l'inférieur) ; ils restent centrés et je ne sais pas comment forcer l'alignement sans valign qui n'est pas fait pour ça... Smiley decu
Ben je crois que c'est ok avec ça :

html, body, table {
      height: 100%;
    }
    
table {
    text-align: center;
}

td.top {
	vertical-align: top;
}

td.middle {
	vertical-align: middle;
}

td.bottom {
	vertical-align: bottom;
}

<table>
	<tr>
		<td class="top">Texte en haut</td>
	</tr>
	<tr>
		<td class="middle">Texte au milieu</td>
	</tr>
	<tr>
		<td class="bottom">Texte en bas</td>
	</tr>
</table>

J'avais oublié de définir le height dans html et body...
Modifié par Nerva (28 Dec 2012 - 14:43)
Bonjour,

Je trouve dommage de partir, aujourd'hui, sur une mise en page en tableau alors qu'il existe des outils performants.

J'avoue que votre question que je croyais simple m'a fait un peu chercher. Mais c'est tout l'intérêt de la chose.

Je vous présente une solution qui m'intrigue un peu car je n'ai jamais utilisé table-cell (compatible à partir d'Ie8) de cette manière et peut-être que cela fera réagir certains regards avisés. Exemple.
J'ai remplacé les span par des div puisque je ne veux pas d'affichage latéral mais ça ne réagit pas au height: 100%; à la place du height: 150px;

En attendant mieux, même si un tableau n'est pas élégant comme méthode, ça fonctionne...
disons que la structure choisis avec le span n'est pas franchement valide Smiley smile

Pour bien faire les choses , on va se retrouver avec un nombre d’élément quasi identique a ceux d'un tableau Smiley smile

table serait body
theader serait header en tr
tbody serait section en tr
tfooter serait footer en tr
et les td seraient des div

http://dabblet.com/gist/4400153

L'idée de base est de ne pas non plus forcement partir sur un gabarit vide , mais ressemblant un peu a une page de contenu,
En fait, sans le dire, je m'attendais à l'arrivée de @gc-nomade. Smiley smile

Je vais regarder ce code de plus près car je suis intéressé par la démarche.
@gc-nomade:
Y-a-t-il un intérêt, dans ce cas, à écrire "body > section, body > footer, body > header " plutôt que : "section, footer, header"?
Modifié par rodolpheb (28 Dec 2012 - 19:44)
oui, (mais ce n'est pas tout a fait ce que j'ai ecrit),
cette façon de sélectionner un element enfant direct permet que tout les autres éventuels footer, header ou section gardent leur style par défaut.

Cdt Smiley smile
Modifié par gc-nomade (28 Dec 2012 - 20:07)
La mise en forme avec Header, Section et Footer avait l'air intéressante mais malheureusement elle ne fonctionne pas de la manière dont je veux l'utiliser. L'usage final est en effet un fichier eBook au format MOBI compilé par Kindlegen.
Bien que selon la documentation, ces balises sont censées être reconnues, le contenu des trois blocs est collé verticalement vers le haut. Pour l'instant, je reste donc au tableau qui lui affiche exactement ce que je désire...
Sujet clos
Aller à