J'essaie de créer une boîte avec un lien, qui a un fond avec une faible opacité et deux divs avec des éléments différents. J'ai essayé tous les moyens mais je n'arrive pas à les aligner correctement. Voici ce que je veux réaliser, et mon code.
Voici le code. https://jsfiddle.net/hmelluso/b3f2m2tb/Problèmes avec l'alignement div et l'opacité
Principalement cette balise <div class="redfooterh> était manquant la citation du nom de classe: <div class="redfooterh">
Et d'autres paramètres pour affiner, voir ici:
Merci! Très utile! – hmelluso
https://jsfiddle.net/b3f2m2tb/3/
Vous pouvez simplement insérer une div de fond par rapport à faire fond d'opacité.
.redfooterw {
max-width: 70rem;
height: 7rem;
position: relative;
border: solid 1px;
display: flex;
align-items: center; /* align vertical */
justify-content: center;
border-color: #eb1c2d;
}
.background{
position: absolute;
width: 100%;
height: 100%;
background-color: #fcc;
opacity: 0.2
}
.inficon{
width: 20%;
z-index: 5;
text-align: center;
font-size: 30px;
padding-bottom: 1%;
}
.footerlink{
text-align: left;
width:80%;
font-size: 20px;
padding-bottom: 1%;
}<div class="redfooterw">
<div class="background">
</div>
<div class="inficon"> 🛈
</div>
<div class="footerlink ">
<a href="# " target="_blank ">Para mayor información sobre este producto clic aquí.</a>
</div>
</div>Excellent, merci pour votre réponse rapide, pourriez-vous dire ce que je fais mal sur l'alignement des deux éléments? – hmelluso
@hmelluso j'ai mis à jour le code ci-dessus –
Modifier le titre de votre question pour quelque chose de plus descripti ve avec la question elle-même. Son tour plus facile pour les autres utilisateurs vous aider. –
Terminé! Je pense maintenant que le point de la question devient plus clair. – hmelluso