Je veux placer la photo soigneusement au milieu et à gauche de la boîte et la police au milieu de celui-ci. Cependant, quand je me trompe avec les marges et le rembourrage, cela ne marche pas comme je le veux.
Voici mon CSS et HTML pour cela.
CSS < / p> Le nom .celeb ne place pas le nom de la célébrité au milieu lorsque j'inclus l'image et que la photo devient déformée lorsque j'utilise la fonctionnalité "Rembourrage" dans CSS. < / p> html
5 Réponses :
Vous pouvez obtenir cette question à l'aide de CSS Flexbox, essayez de fabriquer des fichiers multimédia code> en tant que flexbox, puis alignant sa teneur intérieure comme vous le souhaitez,
.media{
display:flex;
align-items:center; /* will make the inner divs align vertically centered */
}
.media-left{
width:40%; /* or as required */
}
.media-content{
width:60%; /* or as required */
font-size: 100px;
}
Vous pouvez obtenir la sortie souhaitée à l'aide de CSS Flexbox. Dans votre cas, ajoutez Flex au conteneur (support) qui enveloppe à la fois l'image et le nom.
.media{
display:flex;
justify-content:space-between;
align-items:center;
}
J'utiliserais CSS Flexbox . p>
<div class="container"> <img class="celeb-img" src="https://api.buzzanglemusic.com/images/artists/1374" alt="Placeholder image" /> <p class="celeb-name">1. Drake</p> </div>
@ Josezy N'hésitez pas à vous désordre avec différents Justify-Content CSS Propriétés afin d'atteindre ce que vous souhaitez en termes de centrage.
display : flex; align-items : center;
Pour utiliser Flex-Box, vous devez d'abord rendre l'élément à fléchir I.E. Affichage: flex puis appliquer tout ce que vous voulez des propriétés flex dans votre élément. Vous pouvez apprendre flex-box à partir de w3schools.com/css/css3_flexbox. ASP
Si vous êtes prêt à utiliser Bootstrap, vous pouvez utiliser certaines des nombreuses classes puissantes dans le cadre.
Par exemple, vous pouvez utiliser les classes Flexbox et le système de grille, ainsi que de la réactivité Cours d'image. P>
html: strong> p> CSS: strong> P> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap-rounded d-flex">
<div class="d-flex flex-row align-self-center justify-content-start">
<div class="col-6 d-flex align-self-center">
<img src="https://api.buzzanglemusic.com/images/artists/1374" class="img-responsive rounded-circle col-7 col-md-4 col-sm-5 col-xs-12" alt="placeholder image" />
</div>
<div class="col-md-12 d-flex justify-content-end align-self-center text-right card-text">
1. Drake
</div>
</div>
</div>
Utilise Bootstrap une option valide pour vous?
Utiliser CSS Flexbox ferait le tour