Pour la page d’accueil de notre blog à nous, je souhaitais pouvoir aligner verticalement du texte avec une image dont la taille serait définie en pourcentage du corps de la page. Forcément, suivant la largeur de la fenêtre du navigateur, l’image serait plus ou moins haute que le texte. Dans le premier cas, je souhaitais que le texte soit centré verticalement par rapport à l’image. Dans le second, je voulais que le texte entoure symétriquement l’image dans l’axe vertical.

Bien évidemment, j’ai d’emblée axé mes recherches sur un positionnement en mode float.

Sauf que celui-ci ne permet pas a priori un alignement vertical.

En plongeant un peu plus profondément dans la grande marmite du web, je suis tombé sur un billet de l’agence Paris Beyrouth qui expose une astucieuse technique dont je me suis aussitôt emparé. L’idée est d’ajouter avant l’image flottante un élément « élastique » lui-même flottant dont on fera varier la hauteur au gré des événements resize de la page. Ainsi, si la hauteur du texte est supérieure à celle de l’image, celle de l’élément élastique est fixée à la moitié de la différence entre les hauteurs du texte et de l’image. Dans le cas contraire, l’élément élastique a une hauteur nulle et l’on applique au texte un padding-top (ou un margin-top) qui vaut une moitié de la différence entre les hauteurs de l’image et du texte.

En code, ça nous donne un truc du genre :

See the Pen demo_tfi_001 by Amstramgram (@Amstramgram) on CodePen.24505

Ainsi que vous pouvez le constater si vous prenez la peine de faire mumuse en redimensionnant la fenêtre de votre navigateur favori, la bidouille fonctionne plutôt pas mal.

Sauf que ! Jouons un peu avec la bête et introduisons subrepticement en tête une nouvelle image que notre naturelle tendance au vice, au stupre et à la perversion nous pousse comme ça à styler en flottant :

See the Pen demo_tfi_002 by Amstramgram (@Amstramgram) on CodePen.24505

Et là, c’est le drame ! Pour corriger la chose, il nous faut songer à introduire précautionneusement en tête de notre effet un élément stylé en clear:both.

See the Pen demo_tfi_003 by Amstramgram (@Amstramgram) on CodePen.24505

Voilà qui est beaucoup mieux…

Ne me restait plus alors qu’à retenir la leçon, me remuer les méninges et retrousser mes manches pour intégrer la bête dans WordPress. Ainsi débuta une longue aventure aux rebondissements multiples et savoureux que je vous invite à suivre dans les billets suivants.