Positionner 3 lignes verticalement

Bonjour.

Est-il possible [u]en utilisant des div[/u] de positionner verticalement 3 lignes :

- La première en haut de page.
- La seconde en milieu de page.
- La troisième en bas de page.

J'ai essayé ceci :

div.centrage {
  display: table;
  height: 100%;
  width: 100%;
}

div.top {
  height: 33%;
  text-align: center;
  vertical-align: top;
}

div.middle {
  height: 34%;
  text-align: center;
  vertical-align: middle;
}

div.bottom {
  height: 33%;
  text-align: center;
  vertical-align: bottom;
}

<div class="centrage">
	<div class="top">Ligne du haut</div>
	<div class="middle">Ligne du milieu</div>
	<div class="bottom">Ligne du bas</div>
</div>

Tout est plaqué en haut de page.

Merci.

Bonjour,

Tu as la possibilité de jouer avec les marges il me semble , ça donne ça :

.centrage {
  display: table;
  height: 100%;
  width: 100%;
}

.top {
  height: 33%;
  text-align: center;
  margin-bottom: 300px;
  vertical-align: top;
}

.middle {
  height: 34%;
  text-align: center;
  margin-bottom : 300px;
  vertical-align: middle;
}

.bottom {
  height: 33%;
  text-align: center;
  vertical-align: bottom;
}

Je ne sais pas si c'est ce que tu souhaitais faire, donc corrige moi si je me trompe.
Modifié par Tchikibang (05 Jan 2019 - 12:52)

Oups, tu avais dis verticalement, tu peux alors procéder de la façon suivante, je doute que ce ne soit la meilleure mais en attendant une autre réponse ça peu peut-être te servir :

.top {
  height: 233px;
  width:30px;
  text-align: center;
  
  margin-left:auto;
  margin-right:auto;
  vertical-align: top;
  background-color: red;
}

.middle {
  height: 233px;
  width:30px;
  text-align: center;
  
  margin-left:auto;
  margin-right:auto;
  vertical-align: middle;
  background-color: blue;
}

.bottom {
  height: 233px;
  width:30px;
  text-align: center;
  vertical-align: bottom;
  background-color: green;
  margin-left:auto;
  margin-right:auto;
}

<div class="centrage">
    <div class="top">top</div>
    <div class="middle">mid</div>
    <div class="bottom">bot</div>
</div>

Non, ça ne va pas, je ne veux aucune valeur en pixels.

Précision : cette mise en forme est destinée à un ebook au format epub et je suis donc limité question CSS. Pas question d'utiliser les header/section/footer, solution très élégante mais non prise en charge. C'est soit avec des div, soit un tableau (que je n'utiliserai qu'en dernier recours).

Bonjour,

Une solution avec flex :

body {
	margin: 0;
	padding: 0;
}
.centrage {
	height: 100vh;
	display: flex;
	flex-direction: column;
}
.centrage>div {
	flex: 1;
	text-align: center;
	color: white;
}
.top {
	background: red;
}
.middle {
	background: green;
}
.bottom {
	background: blue;
}

EDIT: sinon, solution préhistorique ci-dessous :

html {
	height: 100%;
}
body {
	height: 100%;
	margin: 0;
	padding: 0;
}
.centrage {
	height: 100%;
}
.centrage>div {
	height: 33.333%;
	text-align: center;
	color: white;
}
.top {
	background: red;
}
.middle {
	background: green;
}
.bottom {
	background: blue;
}

Amicalement,
Modifié par parsimonhi (05 Jan 2019 - 14:29)

parsimonhi
Flex, on oublie ; pas pris en charge.
La solution préhistorique fonctionne mal. D'abord, il faut affecter le height: 33.333%; à top, middle et bottom car .centrage>div n'est pas supporté. Ensuite, ça fonctionnerait mais le height: 100% ne peut pas être défini dans le body sous peine de "décaler" l'affichage de toutes les pages (ne me demande pas pourquoi, je n'en sais rien).

J'ai testé quand même dans une page html normale, mais vertical-align que j'ai ajouté est inopérant.

Donc, merci aussi à toi mais ça n'est pas une solution viable pour un epub. Pour l'instant, je reste donc avec un tableau, qui fonctionne parfaitement, même si c'est très archaïque.
Modifié par Nerva (05 Jan 2019 - 18:43)

Sinon tu as une autre solution simple mais efficace si tu dois mettre du texte à coté de cette ligne, mais pas dedans, il te suffit de mettre un border-left à ta boite. Je pense que tu as déjà du pensé à cette solution mais au cas ou

Bonjour,

@Nerva: c'est quelle version de EPUB que tu utilises ?

Amicalement,

parsimonhi a écrit :
@Nerva: c'est quelle version de EPUB que tu utilises ?

Je crée l'intégralité de mes fichiers à la main avec tous les éléments pour la version 3. Mais on s'arrache aussi les cheveux avec les liseuses, programmes, applications et dispositifs : certains prennent en charge tel ou tel style, d'autres non.

Utilisation d'un framework css possible ?

JENCAL a écrit :
Utilisation d'un framework css possible ?

Je ne suis pas familier des framework. Et puis il faut assurer la compatibilité avec les applications plus anciennes. Les structures sont donc les plus simples possibles.

En fait, si j'ai posté ce sujet c'est parce que quelqu'un m'a demandé d'avoir "ça". Cette personne l'avait vu dans un epub : mais ce n'était pas du css, juste une photo zoomée d'une page de livre papier.

Salut,

1/ tu applique un height 100% à tes balises html et body
2/ tu cree tes 3 div avec chacune un height 33.33%
3/ tu centres verticalement ton texte p ou autre dans tes div, en supposant qu'il tienne sur une ligne si j'ai bien compris, avec un line-height 33,33%