image non centrage en utilisant css

Question

Newbie question ici. Essayer d'apprendre les bases. J'ai une page simple avec un en-tête un pied de page et un conteneur. Dans ce conteneur, je veux une image, et je la veux centrée. Utilisation de la marge: 0 auto ne le fait pas. J'ai essayé de donner explicitement au conteneur une largeur, toujours pas bonne. Merci.

html, 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh; 
 
} 
 

 
#header { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: yellow; 
 
} 
 

 
#footer { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: lightgray; 
 
} 
 

 
#container { 
 
    height: 80%; 
 
    width: 100vw; 
 
    background-color: red; 
 
} 
 

 
#imagewrap { 
 
    position: absolute; 
 
    border: 1px solid #818181; 
 
    z-index: 2; 
 
    height: 75%; 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<div id="header"> </div> 
 
<div id="container"> 
 
    <div id="imagewrap"> 
 
    <img src="Images/01Folder/Image.jpg" height="100%" id="front" /> 
 
    </div> 
 
</div> 
 
<div id="footer"> </div>

Answer 1

jsfiddle

supprimer position: absolute; et ajouter la largeur à imagewrap classe .comme width: 300px;

html, body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh; 
 

 
} 
 

 
#header { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: yellow; 
 
} 
 

 

 
#footer { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: lightgray; 
 
} 
 

 

 
#container { 
 
    height: 80%; 
 
    width: 100vw; 
 
    background-color: red; 
 
} 
 

 

 

 
#imagewrap{ 
 
    width: 300px; 
 
    border: 1px solid #818181; 
 
    z-index: 2; 
 
    height: 75%; 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<div id="header"> 
 
    </div> 
 

 
     <div id="container"> 
 

 
     <div id="imagewrap"> 
 
     <img src="Images/01Folder/Image.jpg" height="100%" id="front" /> 
 
     </div> 
 

 
     </div> 
 

 
    <div id="footer"> 
 
    </div>

Answer 2

Vous pouvez ajouter text-align: center; au lieu de margin: 0 auto; à imagewrap

html, body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh; 
 

 
} 
 
#header { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: yellow; 
 
} 
 
#footer { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: lightgray; 
 
    display: block; 
 
} 
 
#container { 
 
    height: 80%; 
 
    width: 100vw; 
 
    background-color: red; 
 
} 
 
#imagewrap{ 
 
    position: absolute; 
 
    border: 1px solid #818181; 
 
    z-index: 2; 
 
    height: 75%; 
 
    display: block; 
 
    width: 100%; 
 
    text-align: center; 
 
}

<div id="header"> 
 
    </div> 
 

 
     <div id="container"> 
 

 
     <div id="imagewrap"> 
 
     <img src="Images/01Folder/Image.jpg" height="100%" id="front" /> 
 
     </div> 
 

 
     </div> 
 

 
    <div id="footer"> 
 
    </div>

Answer 3

Essayez l'image de fond pour ce conteneur et la position centrale de lui. changer url S'il vous plaît fond selon vos besoins

html, body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh;  
 
} 
 

 
#header { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: yellow; 
 
}  
 

 
#footer { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: lightgray; 
 
} 
 

 
#container { 
 
    height: 80%; 
 
    width: 100vw; 
 
    background-color: red; 
 
     
 

 
    background-image: url(http://clockworkmoggy.com/wp-content/uploads/image00.png); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 

 
}  
 

 
#imagewrap{ 
 
    position: absolute; 
 
    border: 1px solid #818181; 
 
    z-index: 2; 
 
    height: 75%; 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<div id="header"> 
 
    </div> 
 

 
     <div id="container"> 
 

 
     <div id="imagewrap"> 
 
     
 
     </div> 
 

 
     </div> 
 

 
    <div id="footer"> 
 
    </div>

Answer 4

Il suffit de retirer et de remplacer margin:0 auto;text-align: center; dans #imagewrap. Ça va marcher!! Vérifiez le code JSFiddle ci-dessous pour référence.

html, body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh;  
 
} 
 

 
#header { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: yellow; 
 
}  
 

 
#footer { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: lightgray; 
 
} 
 

 
#container { 
 
    height: 80%; 
 
    width: 100vw; 
 
    background-color: red; 
 
}  
 

 
#imagewrap{ 
 
    
 
    border: 1px solid #818181; 
 
    z-index: 2; 
 
    height: 75%; 
 
    display: block; 
 
    text-align: center; 
 
}

<body>  
 
     <div id="header"> </div>  
 
     <div id="container">  
 
     <div id="imagewrap"> 
 
     <img src="https://assets.servedby-buysellads.com/p/manage/asset/id/29708" height="100%" id="front" /> 
 
     </div>  
 
     </div>  
 
     <div id="footer"> </div> 
 
    </body>

JSFiddle Demo