Discussion :

[lumycaan]

Bonjour,

Je m'arrache les cheveux depuis quelque temps sur un pb de calage que je veux réaliser. Tout se passe à l'intérieur d'un <td>. J'ai une image et des lignes de texte en dessous. Tout ce petit monde est calé centrer horizontalement dans le td par un text-align:center;

Ce que je souhaite faire est d'aligner les différentes lignes de texte de longueur différente sur la gauche et le tout en restant centré horizontalement sur la ligne de texte la plus longue.

Voici un bout de code que j'ai fait:

Pour le css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
#auteur{
        text-align : center;
	height: auto;
	margin-left:auto;
	margin-right:auto;
}
#texte{
        text-align : left;
}

Pour le html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<td id="auteur">
    <img src="../dossier_images/image1.jpg" ><br>
 
    <div id="texte">
          <b> texte1:</b> dfghjkljhghjkjh
          <b> texte2:</b> dfghjkljhghjkjhcuyuyygiuguy
          <b> texte3:</b> dfghjkljhghjkjhytft
    </div>
</td>

Merci d'avance de votre aide

[Ecared]

Alors je ne suis pas sûr d'avoir bien compris. Tout d'abord pourquoi mettre ça dans un td, pourquoi utilises tu des id?

Ensuite si j'ai bien compris ta ligne la plus longue doit être centrer horizontalement, et tes lignes les plus courtes doivent commencer au même niveau que ta ligne la plus longue?

Si c'est le cas et que c'est pour un texte bien spécifique qui ne vas pas varier et que ton td aura une width fixe, tu peux voir la marge qu'il y a entre ta ligne la plus grande et le début de ton paragraphe le plus long, mettre ton texte en text-align: left, et mettre un padding-left de XXpx, XX étant la marge que tu as trouvé.

Précise moi sinon avec une image le rendu que tu obtiens et celui que tu veux avoir si t'y arrives pour que je comprennes bien.

[Invité]

Bonjour,

essaie :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#texte{
        display:inline-block;
        text-align : left;
        margin:0 auto;
}

[lumycaan]

Bonjour,

Merci beaucoup, ça fonctionne.