Alignement texte-image

Par Sachs, il y a 11 ans


Les bases HTML/CSS

Bonjour,

J'aimerai créer en deux colonnes une partie image et à côté, une partie texte. Pour le moment, j'ai créer des ul/li en float left avec witdh à 50%, ma partie texte height 480px cependant, j'aimerai que en resizant mon écran, mon contenu texte s'adapte à mon image et que je ne doivent pas changer à chaque pixel quand je resize...

Voilà mon exemple :

J'espère que vous comprennez ce que je souhaite faire,
que ma partie "texte" s'adapte en hauteur avec mon image.

Cordialement,

Sachs.

2 réponses

Astor, il y a 11 ans

Hello,
Si tu n'as qu'une seule ligne, tu peux jouer sur le line-height sinon avec un position absolute, un top / left à 50% et un transform: translateY(-50%) translateX(-50%).

Jordan Taisne, il y a 10 ans

Hello,
Je pense que tu pourrais utiliser le display: table en css pour arriver a bien faire ce que tu souaite :

<style> img { display: block; max-width: 100%; margin: 0 auto; } .items { display: table; width: 100%; table-layout: fixed; } .item { display: table-row; } .image, .texte { display: table-cell; width: 50%; text-align: center; vertical-align: middle; } .texte { padding: 10px; } </style> <div class="items"> <div class="item"> <div class="image"> <img src="//placehold.it/600x400" alt=""> </div> <div class="texte"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis repellat sint eius ipsam molestiae aut tempora recusandae, ut optio iusto dolorem voluptatibus aliquid provident expedita natus voluptatem labore voluptates amet.</p> </div> </div> <div class="item"> <div class="texte"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="image"> <img src="//placehold.it/600x400" alt=""> </div> </div> </div>

J'espère que ca va t'aider.