在div中居中放置图像

我已经将div中的图像边框设置为无。我现在想要将该图像置于其包含的div内。我曾尝试使用margin: 0 auto;，但那没有奏效。在div中居中放置图像

我相信我忽视的东西愚蠢的，但我想争取计算器社会的帮助所以这不走我盯着屏幕要弄清楚的一个小时。非常感谢。

<body> 
    <div id="wrapper"> 
     <div id="banner"> 

      <img src="logo3.png"/> 
      <!--<img src="kslf_logo.png"/> 
      <img src="logo2.png" title="Katie Samson Lacrosse Festival Logo"/>--> 


      <div id="social_network"> 
       <a href="#" target="_blank" title="Check out the Facebook Page!">Facebook</a> 
      </div> 

     </div> 
    </div> 
</body>

这里是CSS ...

#banner { 
    height: 100px; 
    width: 960px; 
    padding-bottom: 10px; 
} 

#banner img { 
    border: none; 
    margin: 0 auto; 
}

来源

2010-01-25 Dan

尝试图像的display属性设置为block：

banner { 
    height: 100px; 
    width: 960px; 
    padding-bottom: 10px; 
} 

banner img { 
    border: none; 
    display: block; 
    margin: 0 auto; 
}

来源

2010-01-25 17:55:15

宾果，谢谢你！ – Dan 2010-01-25 17:56:37

非常欢迎，这是一个非显而易见的CSS事情。 – 2010-01-25 17:58:03

水平：只是尝试

text-align:center;

来源

2010-01-25 17:53:06 roman

出于某种原因，我没有得到在这里张贴HTML没有它撕心裂肺它作为一个页面，我们对此深感抱歉的窍门，但我认为这个解决方案仅适用于IE浏览器，它不是在这种情况下，反正工作，有没有一个跨浏览器兼容的方式来做到这一点？ – Dan 2010-01-25 17:54:52

@Dan：修正它。你必须用四个空格来表示每个代码。 – 2010-01-25 17:57:04

要么

banner { 
    height:100px; 
    text-align:center; 
    width:960px; 
    padding-bottom:10px;}

，或者如果IMG是特定大小的那么

banner img { 
     display:block; 
     width: <somevalue>px; 
     border:none; 
     margin:0 auto; 
     }

将工作..

来源

2010-01-25 17:53:50

我相信这只是margin: auto;。不需要零。

来源

2010-01-25 17:53:57 Hunter

应用text-align: center到您的横幅DIV将中心的内联和inline-block的儿童（其中包括img标签）。

你的代码不工作的原因是因为margin: 0 auto只会居中块元素。

来源

2010-01-25 17:54:44 nickelleon

许多详尽尝试后居中在一个div（垂直和/或水平地）对准的图像，我理解以下内容。
垂直居中对齐div中的图像。

.div { 
display:flex; 
justify-content:center 
}

要水平居中对齐div中的图像。

.div { 
display:flex; 
align-items:center; 
}

要在一个div垂直居中都和水平的图像，有2个选项（1）

div { 
display:flex; 
align-item:center; 
justify-content:center; 
}

（2）

.div { 
display:flex 
} 

.div > img { 
margin: auto 
}

请让我知道，如果这在任何情况下都不起作用。

来源

2016-03-30 14:27:46 Malathy

在div中居中放置图像

回答

相关问题