圖像不居中使用css

Question

新手問題在這裏。試圖學習基礎知識。我有一個頁眉頁腳和一個容器的簡單頁面。在那個容器中，我想要一個圖像，並且我希望它居中。使用保證金：0汽車沒有這樣做。我曾嘗試明確給容器一個寬度，但仍然不好。謝謝。

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

除去position: absolute;並添加寬度imagewrap類。像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

您可以添加text-align: center;而不是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

嘗試背景圖像對於該容器，並將其定位中心。 請更改背景鏈接按您的要求

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

只是刪除margin:0 auto;和#imagewrap更換text-align: center;。它會工作！ 檢查下面的JSFiddle代碼以供參考。

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