Je crée mon site Web et le rend compatible avec les mobiles avec des balises @media sur CSS. J'ai une image du bâtiment de l'état de l'empire qui s'aligne vers la droite au lieu du centre chaque fois que la fenêtre est inférieure à 1235px. Je me demandais quelle est la racine de ce problème? J'ai essayé d'utiliser une balise @media pour centrer l'image avec "text-align: center;" mais pas de chance.
Cela ressemble actuellement à ceci
L'image cible que je veux centrer s'appelle "NYC_icon"
Voici mon HTML:
.section1 {
margin: 80px;
padding: 30px 20px;}
#NYC_icon {
display: inline-block;
margin-left: 200px;
vertical-align: top;}
@media (max-width:1278px) {
#NYC_icon img{
text-align: center;}}
Voici mon CSS:
<div class="section1">
<div id="NYC_icon">
<img src="C:\Users\LYind\OneDrive\Documents\Full-Stack Developer 2020 Course\Personal Website HTML\Images\home2.png"
alt="NYC">
</div>
<div id="Mini_Bio">
<h1>
Linda Ye
</h1>
<h2>
<i>NYC
</i>
</h2>
<p>
Aspiring <strong> coder</strong>, business
<strong> woman</strong>, avid
<strong> runner</strong>, and weekend
<strong> chef</strong>.
</p>
</div>
</div>
3 Réponses :
Vous pouvez essayer d'appliquer le text-align: center au div qui contient l'image. Et spécifiez également margrin: 0 lorsque la largeur de l'écran est inférieure à 1235px. donc cela permet que l'image puisse être centrée horizontalement.
@media (max-width:1235px) {
#NYC_icon {
display: block;
margin: 0;
text-align: center;
}
}
Merci beaucoup!
Tout d'abord, je vous recommande de vous rendre sur MDN < / a> et passez en revue les bases de la mise en page. Je ne comprends pas ce que vous essayez de faire avec le div qui contient l'image.
En ce qui concerne ce cas particulier, expérimentez les changements suivants:
Merci pour les conseils et les liens! Je les ai mis en favori pour examen
Le
J'ai apporté les modifications pertinentes au code pour que les images soient centrées à tout moment, Le code est fortement commenté, Si vous avez des questions, n'hésitez pas à les poser.
<div class="section1">
<div id="NYC_icon">
<img src="https://picsum.photos/300" alt="NYC">
</div>
<div id="Mini_Bio">
<h1>
Linda Ye
</h1>
<h2>
<i>NYC
</i>
</h2>
<p>
Aspiring <strong> coder</strong>, business
<strong> woman</strong>, avid
<strong> runner</strong>, and weekend
<strong> chef</strong>.
</p>
</div>
</div>
/* To illustrate Not needed */
body * {
padding: 10px;
border: 1px solid;
}
/* To illustrate Not needed */
.section1 {
margin: 10px;
padding: 30px 20px;
}
#NYC_icon {
/* To let the element fill the space so we can center the img inside */
display: block;
/* text-align on the parent of the element we want to align */
/* text-align proerty only aligns inline level elements */
/* inline level elements are elements with display value
* set to inline or inline-[something]
*/
text-align: center;
/* margin-left: 200px; removed not needed*/
/* vertical-align: top; removed not needed*/
}
Essayez de définir la marge gauche sur 0px dans votre requête multimédia pour votre #NYC_icon.
Pour centrer votre image à l'intérieur de #NYC_icon, vous pouvez appliquer le CSS suivant à #NYC_icon: display: flex; justify-content: centre;