Discussion :

[rolandl]

Bonsoir à tous,

Je travaille actuellement sur un site wordpress qui exploite le thème linstar dont une page de démo est disponible ici : http://gsrthemes.com/linstar/index.html.

Ce thème propose dans ses pages d'exemple, un affichage de contenu sur 2 colonnes avec à droite une image et à gauche du texte. Un exemple est par exemple disponible dans le lien que je donne plus haut. Voici tout de même une capture d'écran :



Je souhaiterais modifier le CSS du thème pour que dans ce cas concret, les contenus des 2 colonnes soient centrés verticalement l'un en fonction de l'autre. Je m'explique :

• Si la hauteur du texte est plus grande que la hauteur de l'image : l'image est centrée verticalement par rapport au texte ;
• Si la hauteur de l'image est plus grande que la hauteur du texte : le texte est centrée verticalement par rapport à l'image.

J'ai essayé pas mal de solutions trouvées sur le web comme par exemple :

• http://zerosixthree.se/vertical-alig...-lines-of-css/
• http://putaindecode.fr/posts/css/le-...ss/#conclusion

Mais je n'ai pas réussi à l'appliquer à la structure HTML du thème Wordpress que je tente d'exploiter.

Si l'un d'entre vous y parviens ou peut me donner des pistes, je suis preneur

merci d'avance pour votre aide !

[friendofweb]

Bonjour, ça vaut ce que ça vaut, vous pourriez encadrer, ce que vous estimez être les 2 colonnes (div ?) dans une autre div et les centrer verticalement. Je crois que le problème est que vous partez d'un code "clé en main", que vous voulez modifier.

En cherchant sur le forum, voici un aperçu de ce qui est possible en css : Centrer verticalement et horizontalement

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
 
<div id="main">
  <div id="menu">
    <p>      
    du texte du texe du texte du texe
    du texte du texe du texte du texe
    du texte du texe du texte du texe      
    du texte du texe du texte du texe      
    du texte du texe du texte du texe
  </p>
  </div>
  <div id="contenu">
   insérer une balise <code>&lt;img src=&quot;image.jpg&quot;&gt;<code>
  </div>
</div>

Code css :

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
 
html {
  height:100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
#main {
  display:flex;
  flex-direction:row;
}
#menu {
	width:30%;
  padding:20px;
  background:green;
}
#contenu {
	width:70%;
  padding:20px;
  background:yellow;
}