28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centrage vertical (again)

connecté
Bonjour
ça doit être au moins la dixième fois que j'appelle au secours pour le centrage vertical.

Voici le HTML:

<figure class="tile">
    <img src="photo/icone_pharaon.jpg" alt=""/>
    <figcaption>
        <h3> Vallée des rois<br/>Vallée des reines</h3>
        <h4>Pharaons, reines et princes</h4>
    </figcaption>
</figure>


Voici ce que ça donne:
http://tests.osirisnet.net/migration/images/tuile.png
Question: comment styler ce bazar pour que le texte soit centré verticalement, c'est à dire quelque chose comme ça:
http://tests.osirisnet.net/migration/images/tuile-centree.png

Merci pour vos conseils
Modifié par PapyJP (14 Jan 2017 - 16:44)
connecté
Merci de ta réponse, je verrai cela demain, je ne fais plus que des c... à cette heure tardive!
connecté
Hmm! L'image est réduite à un point!

Il doit y avoir un zombie dans le CSS:

/* définition des tuiles en général */
.tile {
	display:inline-table;
	vertical-align:middle;
	margin:0.25em 0;
	padding:2px 0.25em;
	overflow:auto;
	border:1px solid #990000;
	border-radius:0.25em;
}
/* tuiles de la page centrale: arrondi plus grand */
.centrale .tile{
	border-radius:0.5em;
}
.tile img {
	float:left;
	display:inline;
	max-width:38%;
	margin:0 0.5em 0 0;
}
.tile figcaption{
	max-width:100%;
	min-width:100%;
	text-align:justify;
	margin-right:0.25em;
}
.tile figcaption h3 {
	text-align:center;
}
.tileList .tile {font-size:0.9em;}

/* les tuiles spécifiques qui servent d'index, dont la tuile en question */
.tileList.index .tile {display:table;}
.tileList.index .tile img,
.tileList.index .tile figcaption{
	float:none;
	display:table-cell;
	vertical-align:middle;
}


La page se trouve à cette adresse: http://tests.osirisnet.net/centrale.html
La feuille CSS: http://tests.osirisnet.net/indexPages.css

Je coule!!!

Edit: j'ai supprimé les max-width:100%;minwindth100%; de figcaption qui sèment le souk, mais le résultat n'est pas nettement mieux:
http://tests.osirisnet.net/migration/images/tuile-centree1.png
Modifié par PapyJP (15 Jan 2017 - 10:34)
connecté
Compléments d'explication:
1) pour que cela soit responsible, les tailles ne sont jamais données en px mais en %, ce qui complique fortement les choses
2) les images sont stylées par des max-width, de façon à ce qu'elles n'excèdent pas la taille "naturelle" du fichier image
3) les tuiles "normales" fonctionnent très bien, avec une image en float:left, ce qui permet au texte de se replier éventuellement au dessous de l'image si la taille de l'écran est réduite, voir par exemple cette page
4) le seul problème que je veux traiter dans ce cas est tout à fait mineur: il s'agit de faire des tuiles qui ne comportent qu'un titre <h3> et éventuellement un sous-titre <h4> sans texte.
connecté
J'ai finalement trouvé ce qui n'allait pas: des effets de bord des près de 1000 lignes de CSS qui trainent...
Modifié par PapyJP (16 Jan 2017 - 09:24)
Sujet clos
Aller à