image not centering using css
Question
Newbie question here. Trying to learn the basics. I have a simple page with a header a footer and a container. In that container I want an image, and I want it centered. Using margin: 0 auto is not doing it. I have tried explicitly giving the container a width, still no good. Thanks.
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>
4 answers
solution1
0 2017-02-27 10:33:54
You can add text-align: center; instead of margin: 0 auto; to 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>
solution2
0 ACCPTED 2017-02-27 10:34:55
remove position: absolute; and add width to imagewrap class .like 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>
solution3
0 2017-02-27 11:15:28
Try background image for that container and position it center. Please change background url as per your requirement
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>
solution4
0 2017-02-27 11:24:59
Just remove margin:0 auto; and replace text-align: center; in #imagewrap . It will work!! Check the below JSFiddle code for reference.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.