Discussion :

[mathieu]

Bonjour,

Me revoilà de retour à nouveau pour un problème qui a l'air simple mais qui me fait tourner en rond encore une fois. Je pense que mon cerveau n'est pas adapté au CSS, je vais finir par poster dans le forum emploi pour trouver un cerveau qui parle CSS courant.

En ce moment je cherche à centrer horizontalement du texte dans un bloc pour avoir quelque chose comme ça :


Voilà le code que j'ai déjà essayé :
http://codepen.io/anon/pen/zrOjae

Chez moi je n'obtiens que ça :


J'ai pourtant essayé ce qu'il y a dans la FAQ comme vous pouvez le voir dans le code
http://css.developpez.com/faq/?page=...calement_block
Mais je n'arrive pas à obtenir ce que je souhaite.

[nef1912]

Bonjour,

En fait tu y étais presque.
Il faut définir le parent des éléments que tu veux centrer de cette façon :

Code :

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

1
2
3
4
5
 
.zone{
  display : table;
  text-align:center;
}

Ensuite, tu peux dire aux éléments enfants qu'ils sont des cellules et qu'ils doivent être placés au milieu:

Code :

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

1
2
3
4
5
 
.zone a {
  display: table-cell;
  vertical-align: middle;
}

Lien codepen

[mathieu]

merci on approche de ce dont j'ai besoin mais ce n'est pas encore ça.
je cherche à avoir l'image et le texte alignés à gauche dans la case rose mais aussi les 2 alignés verticalement au centre comme sur la 1re image de mon message.

[Invité]

bonjour,

il faut mettre en parallèle la structure des <table> avec celle des div en display:table-xx; :

• <table> -> div en display:table;
• <tr> -> div en display:table-row;
• <td> -> div en display:table-cell;

Ici, tu a sl'équivalent de 2 <table> imbriquées, répétée 2 fois.

=> écrit le code html avec des <table> pour obtenir le résultat voulu.
Tu sauras ensuite où et comment remplacer les <table>, <tr>, <td> par les bons <div>, suivant l'équivalence ci-dessus.

Dans ce genre :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table class="tab1">
   <tr>
      <td>
         <table class="tab2">
            <tr>
               <td><img src="image1.jpg" /></td>
               <td>texte1...</td>
            </tr>
         </table>
      </td>
   </tr>
</table>
 
<table class="tab1">
   <tr>
      <td>
         <table class="tab2">
            <tr>
               <td><img src="image2.jpg" /></td>
               <td>texte2...</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Le truc en plus (ou en moins :
A moins d'avoir plusieurs "lignes" dans la même table, le tr n'a pas besoin d'être retranscrit (pas besoin de div en table-row).
C'est le cas ici, pour "tab1" et "tab2".

On obtient alors : http://codepen.io/jreaux62/pen/vLYpYP

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="ttab1">
 
      <div class="tcell1">
         <div class="ttab2">
 
               <div class="tcell2"><img src="image1.jpg" /></div>
               <div class="tcell2">texte1 sf fdsgzergf gerg ergerg...</div>
 
         </div>
      </div>
 
</div>
 
<div class="ttab1">
 
      <div class="tcell1">
         <div class="ttab2">
 
               <div class="tcell2"><img src="image2.jpg" /></div>
               <div class="tcell2">texte2 qsdf qsdfqsdf qsdfqsdf qsdfqsdfqs qsdfqsdf rty tryery erty...</div>
 
         </div>
      </div>
 
</div>

avec :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.ttab1, .ttab2 { 
  display:table; 
}
.tcell1, .tcell2 { 
  display:table-cell; 
  vertical-align: middle;
  padding:5px;
}
 
/* mise en page */
.ttab1 { 
  width:300px; float:left;
  height:200px;
  border:1px solid pink;
}

N.B. certaines balises <div> peuvent être remplacées par d'autres balises, plus appropriées (<a>, <p>,...).

Je te laisse le retranscrire avec tes propres balises, dans ton propre code.

[mathieu]

oh super, ça donne exactement ce que je veux
en plus je me suis déjà demandé à quoi ça sera de ne pas utiliser "table tr td th" pour présenter les données et là il y a un exemple clair d'utiliser du code CSS : la balise "a" sert en même temps de lien et de ligne de tableau
http://codepen.io/anon/pen/NxWwQG

[Invité]

Tout-à-fait



N.B. au lieu de <span class="img">, tu peux utiliser <figure> (HTML5), avec :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
.zone a span,.zone a figure {
		display: table-cell;
		vertical-align: middle;
		text-align: justify;
		border: 2px solid #3B3;
}
 
.zone a figure {
		width: 75px;
		padding-right: 10px;
}