图像不使用CSS中心

时间:2017-02-27 10:27:42

标签: html css margin centering

新手问题在这里。试着学习基础知识。我有一个简单的页面,页眉是一个页脚和一个容器。在那个容器中,我想要一个图像,我希望它居中。使用保证金: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>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:0)

您可以将text-align: center;代替margin: 0 auto;添加到imagewrap

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

jsfiddle

删除position: absolute;并将宽度添加到imagewrap类。width: 300px;

&#13;
&#13;
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;
}
&#13;
    <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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

尝试该容器的背景图像并将其置于中心位置。 请根据您的要求更改背景网址

enter image description here

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>

答案 3 :(得分:0)

只需移除margin:0 auto;并替换text-align: center;中的#imagewrap即可。它会工作!! 请查看以下JSFiddle代码以供参考。

&#13;
&#13;
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;
}
&#13;
    <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>    
&#13;
&#13;
&#13;

JSFiddle Demo