Alignement texte-image

Sachs
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

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

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.