28172 sujets

CSS et mise en forme, CSS3

"vertical-align: middle" : forcer le centrage vertical du texte

Bonjour,

J'utilise un thème Wordpress et j'utilise Visual Composer.

J'ai créé une rangée et à l'intérieur, un bloc texte. Pour que le texte h3 soit centré en hauteur, j'ai appliqué le css vertical-align: middle soit
.vign-metre-fermeture-titre-1 h3 {
vertical-align: middle!important;
display : inline-block;
}


Mais ça ne marche pas. J'ai aussi utilisé display : inline-table; mais sans plus de succès. Smiley ohwell

Pour info, je n'ai pas de soucis avec les autres propriétés CSS qui fonctionnent très bien avec VC.

Je reconnais que c'est un pb auquel je suis confronté depuis longtemps et le support Visual Composer ne me propose que de passer en... html, ce que n'appréciera pas mon client lorsqu'il souhaitera effectuer une mise à jour de son contenu Smiley confus
Modérateur
bonsoir,
display:inline-block;
vertical-align:middle;


Ceci aligne l’élément par rapport à l'interligne ou il se trouve, dans du texte ou a coté d'une autre boite en ligne.

Par rapport à quoi ce titre doit-il se centrer si ce n'est pas sur la ligne ou il s'affiche ?

cdt,
Désolé mais je ne comprends pas trop "Par rapport à l'interligne où il se trouve".

En fait, mon texte s'affiche dans un bloc texte, il contient plusieurs lignes et il doit juste être centré verticalement dans le bloc.

Le résultat doit juste être un rectangle type encadré couleur avec une phrase au milieu. C'est certainement hyper basique mais je n'y parviens pas.

J'ai essayé de mettre en application les conseils suivant : http://vanseodesign.com/css/vertical-centering/
Mais je ne comprends pas tout Smiley ohwell
Modérateur
Sans un morceau de ton code html/css qui reproduit ton défaut, à part de reproposer des tutoriels ou autres références , on ne vas pas pouvoir faire grand chose de plus.

par exemple : https://www.w3.org/wiki/CSS/Properties/vertical-align

edit, le lien que tu donnes évoques de vieilles méthodes, à part le display:table, les autres sont bancales, c'est un avis personnel .
Modifié par gcyrillus (11 Oct 2017 - 23:09)
Merci gcyrillus pour ton avis sur le lien que j'ai indiqué car c'est celui vers lequel m'a redirigé le support VC.

Voilà ce que j'ai extrait du code Google, je ne sais pas si ça peut aider.

HTML :
<div class="wpb_text_column wpb_content_element  monstyle">
<div class="wpb_wrapper">
<h3>Mon texte à centrer verticalement</h3>
</div>
</div>


CSS (en l'état actuel)
.monstyle h3 {
	color: #FFFFFF!;
	font-size: 20px;
	line-height: 28px;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 30px;
	padding-left: 30px;
        vertical-align: middle;
}

Modifié par goudurisc (11 Oct 2017 - 23:58)
Bon hé bien je crois que cette fois, c'est la fête, après avoir ratissé toutes les solutions, qui fonctionnent d'ailleurs parfaitement dans un contexte html hors thème, the winner is... Raphael avec...
.parent {
  display: flex; /* contexte sur le parent */
  flex-direction: column; /* direction d'affichage verticale */
  justify-content: center; /* alignement vertical */
}


Je ne sais pas comment exprimer ma joie après autant d'heures passées à obtenir cette petite justif sur un Bloc VC (et pas WC). Encore une fois, Alsacreation au top, un grand merci à tous !!!!! Smiley cligne
Sujet clos
Aller à