Bonjour à tous !
Je vous met ici un petit bout de code d'une plus grande page car je cherche surtout à comprendre la technique et pourquoi cela ne fonctionne pas. Je suis autodidacte donc je bidouille, il y a donc probablement des notions de bases qui me manquent pour bien saisir mon problème.
Sachez que j'essaie ici de coder pour une page intégrée dans un wordpress avec un thème qui a donc son propre css (mais qu'à piori j'arrive plus ou moins à contourner en entrant les .css directement dans les codes sources des articles.
Je vous laisse regarder l'image suivante et vous allez tout de suite comprendre mon problème.
Je souhaite donc aligner verticalement un texte au milieu d'une image.
J'ai trouvé sur plusieurs sites et forums des solutions, dont celle-ci, que j'essaie de bidouiller avec mon propre code par la suite :
Sauf que moi, j'aimerais que mon image soit située à droite du texte.
J'ai donc essayé la solution suivante :
Cela fonctionne presque ! J'ai mon image à droite avec le texte à sa gauche mais IMPOSSIBLE d'aligner mon texte au milieu, même en essayant avec des div et des "vertical-align" un peu partout.
Mon idée de base était de définir une première div, que j'ai appelé "grosblocs", pour ainsi positionner le texte par rapport à l'image à l'intérieur mais franchement je me suis battu avec pendant une dizaine d'heure et je n'y arrive toujours pas ...
Quelles balises me manque-t-il pour arriver à tout bien placer ? Avec le tout premier code que j'ai cité, dès que j'introduit un "float:right", cela ne fonctionne plus
Je vous met ici un petit bout de code d'une plus grande page car je cherche surtout à comprendre la technique et pourquoi cela ne fonctionne pas. Je suis autodidacte donc je bidouille, il y a donc probablement des notions de bases qui me manquent pour bien saisir mon problème.
Sachez que j'essaie ici de coder pour une page intégrée dans un wordpress avec un thème qui a donc son propre css (mais qu'à piori j'arrive plus ou moins à contourner en entrant les .css directement dans les codes sources des articles.
Je vous laisse regarder l'image suivante et vous allez tout de suite comprendre mon problème.
Je souhaite donc aligner verticalement un texte au milieu d'une image.
J'ai trouvé sur plusieurs sites et forums des solutions, dont celle-ci, que j'essaie de bidouiller avec mon propre code par la suite :
<div class="categorie">
<img src="mon_image" width="200" height="220">Le texte
</div>
<style media="all" type="text/css">
.categorie img {
vertical-align: middle;
}
</style>
Sauf que moi, j'aimerais que mon image soit située à droite du texte.
J'ai donc essayé la solution suivante :
<!-- Visible -->
<div class="grosblocs">
<img class="floatright" src="http://www.lionsdeguerre.com/images/photos/photo-garde01.jpg" width="135" height="200"><p>Pour ceux qui arrivent de loin ou qui auraient fait le voyage à pied plutôt qu'en cheval ou qui auraient rencontré un dragon en route, les obligeant à quelques heures de combats, ne vous inquiétez pas ! <b>L'équipe de Wef Of Thrones organise des rondes toutes la nuit</b>, il y aura toujours quelqu'un pour vous accueillir, même à 4h du matin !</p>
</div>
<!-- CSS !-->
<style media="all" type="text/css">
p {
text-align:justify;
position:relative;
}
img {
vertical-align: middle;
}
.floatright {
float:right;
margin:0px 4px 0px 15px;
}
</style>
Cela fonctionne presque ! J'ai mon image à droite avec le texte à sa gauche mais IMPOSSIBLE d'aligner mon texte au milieu, même en essayant avec des div et des "vertical-align" un peu partout.
Mon idée de base était de définir une première div, que j'ai appelé "grosblocs", pour ainsi positionner le texte par rapport à l'image à l'intérieur mais franchement je me suis battu avec pendant une dizaine d'heure et je n'y arrive toujours pas ...
Quelles balises me manque-t-il pour arriver à tout bien placer ? Avec le tout premier code que j'ai cité, dès que j'introduit un "float:right", cela ne fonctionne plus