Centrer verticalement un text
[F]ull-sky
Messages postés
210
Statut
Membre
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
J'ai un soucie en html/css, je sollicite votre aide car malgré les recherches google et se que j'ai trouver sur la toile, rien ne fonctionne. Je pense que l'erreur vient surement de mon code.
Je voudrais centrer verticalement un text dans une div mais rien ne fonctionne.
Vous comprendrez mieux avec cette capture :
Effectivement je souhaite remonter le text afin qu'il soit centrer en hauteur, par rapport à l'image de gauche.
Voici le code html:
Voici le code CSS:
Merci de votre aide.
J'ai un soucie en html/css, je sollicite votre aide car malgré les recherches google et se que j'ai trouver sur la toile, rien ne fonctionne. Je pense que l'erreur vient surement de mon code.
Je voudrais centrer verticalement un text dans une div mais rien ne fonctionne.
Vous comprendrez mieux avec cette capture :
Effectivement je souhaite remonter le text afin qu'il soit centrer en hauteur, par rapport à l'image de gauche.
Voici le code html:
<div id="contenuAssiettes">
<p><img src="assiettes/assiette1.png" class="effet_assiette" />
<b>Pattes carbonara</b> : Spécialité du chef, apprécié par les clients.</p>
</div>
Voici le code CSS:
#contenuAssiettes{
border-left: 10px solid #8a6f87;
margin: auto;
height: 175px;
width:780px;
background-color: rgba(255, 255, 255, 0.03);
}
#contenuAssiettes > p{
margin-bottom: 100px;
display: inline;
color: white;
vertical-align:middle;
font-family: "demo", sans-serif;
}
Merci de votre aide.
1 réponse
-
Bonjour
https://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html
Pas du chercher au bon endroit ^^
-
-
Centrer verticalement un bloc dans un conteneur de hauteur fixe :
Html<div class="conteneur"> <div class="bloc"> <h3>Kikoo !</h3> <p>Lorem ipsum [...]</p> </div> <span></span> </div>
CSSdiv.conteneur { height:200px; line-height:200px; text-align:center; /* centrage horizontal */ } div.bloc { width:100px; border:1px solid #fff; vertical-align:middle; display:inline-block; line-height:normal; /* on rétablit le line-height */ text-align:left; /* ... et l'alignement du texte */ }
Source : https://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html
Ps -> jamais je ne te donnerai une réponse toute faite ...
Cdt -
J'ai suivie cette partie du tutoriel également, mais elle sert a centrer deux éléments l'un en dessous de l'autre si j'ai bien compris. Tandis que moi je souhaiterais les centrer à côté.
Sachant que je ne connais pas très bien le code, je ne sais pas quelle propriété modifier. -
-
-
