div.st-header-image
{
width:100%;
background-color: rgb(167, 184, 133);
margin:0px;
text-align: center;
overflow: hidden;
p.st-description
{
margin:0px;
color:red;
font-size:40px;
line-height: 40px;
vertical-align: middle;
}
::before
{
content: " ";
padding-top: 40%;
display: inline-block;
}
}
3 Réponses :
En regardant votre code, je suppose que vous utilisez Sass PreProcessor CSS. Avec cela, vous devez ajouter "P" élément avant ":: avant" sélecteur ou vous pouvez l'inclure à l'aide d'ampersand comme celui-ci
:: Avant, c'est pour Div, non paragraphe ... Donc, div changez la taille de la résolution de l'écran.
Cependant, :: avant seul, non attaché à un élément, n'a pas de sens et ne s'affiche pas. Alors attachez-le à l'un ou l'autre div ou le p , ne faites pas div :: avant , do div :: avant
Oui, je fixe ça, mais toujours le même résultat ... pourrait être le problème que j'essaie d'écrire "l'image d'en-tête" dans le rembourrage de l'image fondamentalement ...
Ce que vous voulez accomplir est d'avoir la DIV avec un espace réactif sur le dessus ainsi que le paragraphe collé au milieu lors de sa réactivité.
J'ai corrigé votre code sans le Cette même fonctionnalité peut être atteinte à l'aide d'un rembourrage pour la DIV et un peu de positionnement. P> J'ai partagé le code sur repl.it ICI P> :: avant code> pseudo élément. Voici le CSS dont vous avez besoin: H2>
div.st-header-image {
width: 100%;
background-color: #a7b885;
margin: 0px;
text-align: center;
overflow: hidden;
padding-top: 40%;
position: relative;
}
p.st-description {
margin: 0px;
color: red;
font-size: 40px;
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
padding-top: 15%;
}
Merci cela fonctionne comme un charme ... J'ai abandonné dessus et je suis allé avec une hauteur statique au lieu d'être réactive, mais celle-ci fixe parfaitement le problème ... Merci beaucoup.
Vous devez utiliser l'affichage Flex. Son autorise toujours la position centrale.
Utilisez ce code.
html CSS
Fournir un exemple de reproductible minimal (cela devra inclure un minimum de HTML pour démontrer le problème) et le présenter comme Démo en direct
Est-ce en Sass?
Si vous souhaitez vraiment centrer, essayez simplement
div {affichage: flex} Div P {margin: auto} Il simplifiera beaucoup votre approche. Ensuite, ajoutez simplement un peu de rembourrage à la DIV ou à l'élément P. Vous devez toutefois ajouter votre HTML ici et convertir le code que vous avez essayé dans un extrait afin que nous puissions voir ce que vous envisagez de tort.@ Doc-han ouais ...
@Quentin j'ai ajouté
@somethingHere Si je fais que ma boîte n'est plus réactive au changement d'écran ...
Assurez-vous de définir
HTML, Corps, Div {Hauteur: 100%; } div {largeur: 100%; } Pour vous assurer qu'il y a de l'espace pour votre boîte pour réclamer. Ensuite, le centrage devrait fonctionner comme un charme.Je vais vous avoir raison, voulez-vous que le texte dans p soit centré verticalement dans la Div?