logo标签列表

将图像在 div 中居中对齐

htmlcss
372
我有以下的div元素。
<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

如何将图像对齐以位于div的中间和中心位置？

14
重复问题，2分钟前已经问过了：CSS：图片居中 - Pekka
1
类似的主题可以在这里找到：https://dev59.com/NGMl5IYBdhLWcg3wTlcl#18516474 - Hashem Qolami
请考虑选择一个答案作为正确答案。 - McSonk
可能是如何将图像在垂直和水平方向上居中对齐的重复问题。 - gbjbaanb
37个回答
10

这将是一个更简单的方法

#over > img{
    display: block;
    margin:0 auto; 
}
8

Well, we are in 2016... why not use flexbox? It's also responsive. Enjoy. 

#over{
display:flex;
align-items:center;
justify-content:center;
}
<div id="over">
 <img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

1
喜欢CSS3！谢谢。但需要注意的是，这只适用于现代浏览器（除了IE）。所有其他浏览器都不会有任何效果。 - Neel
8
简单易懂。2018年，FlexBox。检查浏览器支持情况-可以使用

最简解决方案：
div#over { 
   display: flex; 
   justify-content: center; 
   align-items: center; 
}

为了获得最广泛的浏览器支持： 


div#over { 
   display: -webkit-flex;
   display: -ms-flex; 
   display: flex; 
   justify-content: center; 
   -ms-align-items: center; 
   align-items: center; 
}
7

将img的属性设置为display:inline-block，同时将上级

的属性设置为text-align:center，这样也可以完成工作。

编辑：对于那些正在尝试使用display:inline-block的人们，请不要忘记，例如两个

，像这样

<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>

确实在它们之间没有空格（如此处所见）。

只需基本地避免它们之间的这些（内联块固有的）间隙。您现在正在写的每两个单词之间都可以看到这些间隙！ :-) 希望这能帮助到您中的一些人。

6

我尝试了许多方法，但只有以下方法适用于包含多个内联元素的容器div。下面是将div中的所有内容对齐到中间的代码。

CSS

.divContainer
{
    vertical-align: middle;
    text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
    vertical-align: middle;
}

HTML

<div class="divContainer">
    <span>Middle Text</span>
    <img src="test.png"/>
</div>

样例代码在这里：https://jsfiddle.net/yogendrasinh/2vq0c68m/

5

只需设置父级 div 的 CSS 属性 "text-align:center;"。

 <div style="text-align:center; width:100%">
        <img src="img.png"> 
 </div>
5

CSS文件

.over {
    display : block;
    margin : 0px auto;
5

对于这个问题，选中的答案无法使图像垂直对齐。现代浏览器的一个合适解决方案是Flexbox。Flex容器可以配置为水平和垂直对齐其项目。

<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
    <img src="img.png">
</div>
这个解决方案回答了问题并且可行，不像标记的答案。也许那个点踩的人可以详细说明他们为什么要点踩？ - William
7
从审核队列中：请问您能否添加一些关于您的源代码的上下文信息。仅有代码的回答很难理解。如果您能在帖子中添加更多信息，将有助于提问者和未来的读者。 - RBT
2
这并不能证明downvote的合理性。答案在技术上是正确的，可以帮助未来的读者。我已经更新了答案内容以遵守规则，但也许核心团队应该实施更直接的解决方案，因为识别仅包含代码的答案是一项微不足道的任务。 - William
4
当您需要将图像和其父级div居中对齐，并且父级div覆盖整个屏幕时，请按如下方式操作：即高度：100％和宽度：100％。
#img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
3
尝试使用这个简洁的代码：
<div class="outer">
    <img src="image.png"/>
</div>

同时还有CSS：

.outer{
  text-align: center;
}
.outer img{
  display: inline-block;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接