[Résolu] Mise en page texte sur image

Bonjour,

J'aurais besoin de votre aide

J'ai une image qui fait office de bouton. Dessus, je lui attribue du texte. Le souci, c'est que si le texte dépasse la largeur de l'image/bouton, il ne se met pas à la ligne, mais s’écrit en dehors de l'image/bouton. Une solution ?



Je vous remercie par avance de vos réponses !

Bonne journée

</section>
            <section>
                <table>
                    <tr>
                        <td>
                            <div class="bouton">
                                <p>
                                 <a href="#">GAB confrére</a>
                                </p>
                            </div>
                        </td>
                        <td>
                            <div class="bouton2">
                                <p>
                                <a href="#">GAB de la banque</a>
                                </p>
                           </div>
                        </td>
                        <td>
                            <div class="bouton3">
                                <p>
                                <a href="#">Commercant</a>
                                </p>
                               </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="bouton4">
                                <p>
                                 <a href="#">Commercant</a>
                               </p>
                            </div>
                        </td>
                        <td>
                            <div class="bouton5">
                                <p>
                                 <a href="#">Consultation</a>
                                </p>
                            </div>
                        </td>
                        <td>
                            <div class="bouton6">
                                <p>
                                <a href="#">Annulation</a>
                                </p>
                            </div>
                        </td>
                    </tr>
                </table>
            </section>

.bouton, .bouton2, .bouton3, .bouton4, .bouton5, .bouton6 {
width: 150px;
line-height:200px;

text-align:center;
-moz-transition: all 0.5s ease-in-out 0s;/* Safari and Chrome */
-webkit-transition: all 0.5s ease-in-out 0s;/* Firefox */
-o-transition: all 0.5s ease-in-out 0s;/* IE 9 */
-ms-transition: all 0.5s ease-in-out 0s;/* Opera */
transition: all 0.5s ease-in-out 0s;
opacity: 1;
}

.bouton:hover, .bouton2:hover, .bouton3:hover, .bouton4:hover, .bouton5:hover, .bouton6:hover{
-moz-transform: rotate(5deg) scale(1.10);
-webkit-transform: rotate(5deg) scale(1.10);
-o-transform: rotate(5deg) scale(1.10);
-ms-transform: rotate(5deg) scale(1.10);
transform: rotate(5deg) scale(1.10);
opacity: 0.7;
}

.bouton a, .bouton2 a, .bouton3 a, .bouton4 a, .bouton5 a, .bouton6 a {
color:white;
text-decoration:none;
font-size: 20px;
vertical-align:middle;
text-align:center;
}


.bouton{
background:url(images/bouton.png) no-repeat;
}

.bouton2{
background:url(images/bouton2.png) no-repeat;
}

.bouton3{
background:url(images/bouton3.png) no-repeat;
}

.bouton4{
background:url(images/bouton4.png) no-repeat;
}

.bouton5{
background:url(images/bouton5.png) no-repeat;
}

.bouton6{
background:url(images/bouton6.png) no-repeat;
}

Bonjour,

Peut-être trouveras-tu une réponse dans ce tutoriel :
Comment centrer verticalement sur tous les navigateurs ?

ps : Plutôt que des lignes de codes, il est préférable de fournir une page de test en ligne (pour avoir accès aux images par exemple)

salut,
c'est normal vu que tu utilises un "line-height". À chaque fois que tu passeras à la ligne, celle-ci occupera une "hauteur" relative à la valeur que tu as précisé (ici 200px).
Il faut plutôt passer un "table-cell" et un "vertical-align: middle".

Merci pour vos réponses.

J'ai donc transformé mon line-height en height, et j'ai appliqué un display: table-cell et un
vertical-align: middle sur mes boutons et ça fonctionne

Merci à vous, bonne journée.