2011-03-25 114 views
13

我想在div内设置图像的垂直对齐。我使用img {vertical-align:middle} ,但它不起作用。div内图像的垂直对齐

+0

可能相关:http://stackoverflow.com/questions/3535689 /文本在垂直-中间的DIV。 – Blender 2011-03-25 06:00:09

+1

作为一个新手,你可能想对这些答案进行投票,因为他们指出你在正确的方向,我们都在抽出时间离开工作/生活来互相帮助。 – 2011-03-25 10:52:00

回答

16

使用line-height财产会解决这个问题:

<style> 
.someclass { 
    width: 300px; 
    height: 300px; 
    text-align: center; 
    line-height: 300px; 
    border: dotted; 
} 
.someclass img { 
    margin: auto; 
    vertical-align: middle; 
} 
</style> 
<div class="someclass"> 
    <img src="someimg.jpg" border="0" alt=""> 
</div> 
+0

我使用这段代码,但它不工作在即ie – Deepa 2011-03-25 06:59:12

+0

因为你可能不得不引入变焦 – 2011-03-27 12:59:27

+0

与显示表格单元格相反,这个工作方式像IE7的魅力。谢谢! – 2012-02-14 12:01:20

0

如果设置了DIV display属性table-cell然后vertical-align: middle;会工作。

vertical-align规则仅影响表格单元或具有display: table-cell的元素。

请参阅this article from SitePoint的详细说明。

<style> 
/* change body to .someClasses's parent */ 

body { 
    width: 100%; 
    height:  100%; 
    display: table; 
} 
body > .someclass { 
    width: 300px; 
    height: 300px; 
    text-align: center; 
    border:dotted; 
    margin: 0 auto 
    display: table-cell; 
    vertical-align: middle; 
} 
</style> 

<body> 
    <div class="someclass"> 
     <img src="someimg.jpg" border="0" alt=""> 
    </div> 
</body> 
+0

我使用此代码,但没有工作PLZ试试自己第一 – Deepa 2011-03-25 07:02:14

+1

你是对的我错过了什么。我已经更新了代码来工作。如果你真的很费时花时间阅读我发布的链接,你已经注意到了这一点,并已经解决了这个问题。请努力学习一些东西,而不是简单地寻求答案。 – xzyfer 2011-03-25 23:43:35

+0

display:table-cell is in ie6 – Deepa 2011-03-31 07:09:54

1

如果你正在尝试做我认为的事,垂直对齐不会奏效;你需要使用定位。

通常,将容器相对放置,然后将图像绝对定位,将顶部和左侧设置为50%,然后通过将负边距设置为等于宽度/高度的一半来将图像移回中央。

这里有一个工作示例:http://jsbin.com/evuqo5/edit

基本CSS是这样的:

#container { position: relative; } 
#container img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-top: /* -1/2 the height of the image */ 
    margin-left: /* -1/2 the width of the image */ 
} 
+0

我不想计算每个图像的高度和宽度 – Deepa 2011-03-25 07:03:02

+0

我会发布另一个解决方案,它可以在没有JavaScript的情况下工作,但可能在每个浏览器中都不支持。 – RussellUresti 2011-03-29 17:03:05

+0

不错!它像一个魅力。谢谢 – CHaP 2013-09-15 18:23:23

0

以下职位有一些有用的参考资料:

Text Alignment w/ IE9 in Standards-Mode

另外,根据哪个版本的如果你正在测试IE,你可能最终需要一些浏览器特定的黑客或一些jQuery/JavaScript代码。

如果必须使用单行单元表并利用vertical-align属性。这是蛮力,不是过度语义化,但是它起作用。

6

这是一个不需要JavaScript的解决方案(就像我以前的解决方案那样)。

您可以通过将display: table-cell分配给包含div来实现所需。这里有一个例子:http://jsbin.com/evuqo5/2/edit

我觉得我必须警告你,你需要在你打算支持的每个浏览器中测试这个。支持table-cell值是相当新的,特别是在Firefox中。我知道它适用于Firefox 4,但我不知道任何3.x迭代。您还需要在IE中进行测试(我只在Chrome 10和Firefox 4中测试过)。

的CSS:

div#container { 
    width: 700px; 
    height: 400px; 
    position: relative; 
    border: 1px solid #000; 
    display: table-cell; 
    vertical-align: middle; 
    } 
    div#container img { 
    margin: 0 auto; 
    display: block; 
    } 

你不会需要div#container img的风格,如果你不也想水平对齐图像。

+0

如果您需要使用百分比作为高度,那么这将不起作用,因为这是我的情况。 – 2017-03-16 21:15:44

2

看到这个awser:How to vertical align image inside div

如果你想也水平排列,添加rightleft,像这样:

div { 
    position:relative; 
} 
img { 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
} 
+0

不适用于铬 – 2017-03-16 21:17:29