1. 首页
  2. 问答
  3. 我里面怎么DIV

我里面怎么DIV

2010-02-10 44 views
67

垂直居中图像有这样的标记：我里面怎么DIV

<div> 
    <img /> 
</div>

股利比IMG更高：

div { 
    height: 100px; 
} 

img { 
    height: dynamic-value-smaller-than-100px; 
}

我需要的图像是在div的中间（在它上面和下面有相同的空白空间）。

我尝试这样做，这是行不通的：

div { 
    vertical-align: middle; 
}

来源

2010-02-10 Josef Sábl

+0

这里有两个简单的方法，以一个div内居中的目的，垂直，水平或两者（纯CSS）：http://stackoverflow.com/a/31977476/3597276 – 2015-08-20 14:42:12

回答

73

，如果你的形象是纯粹的装饰，那么它可能是把它当作一个背景图像更加语义解。然后，您可以指定背景

background-position: center center;

的位置。如果它不是装饰，构成有价值的信息，然后img标签是有道理的。你需要在这种情况下做的是具有以下属性的样式包含分区：

div{ 
    display: table-cell; vertical-align: middle 
}

Read more about this technique here。被报告不适用于IE6/7（适用于IE8）。

来源

2010-02-10 14:56:06 pixeline

+0

它不是装饰。我正在建立一个实际上作为链接工作的公司徽标列表，但无论如何都是好主意。 – 2010-02-10 14:59:04

+1

我已经相应地更新了我的答案。 – pixeline 2010-02-10 15:02:14

+0

太棒了，它的工作原理！请只添加这个CSS必须添加到div的信息，而不是img，它让我困惑了一下。非常感谢。 – 2010-02-10 15:03:04

0

在你的例子中，div的高度是静态的，图像的高度是静态的。给图像(div_height - image_height)/2

一个margin-top值如果图像是50像素，然后

img { 
    margin-top: 25px; 
}

来源

2010-02-10 14:57:47 mwcz

+0

不，图片高度是动态的。 – 2010-02-10 14:59:58

0

您是否尝试过在格设置保证金？例如

div { 
    padding: 25px, 0 
}

顶部和底部。您可能还可以使用的百分比：

div { 
    padding: 25%, 0 
}

来源

2010-02-10 15:01:40

+1

这不能用，因为我不知道图像的高度。 – 2010-02-10 15:03:55

5

这是我之前用CSS完成垂直居中的解决方案。这适用于所有现代浏览器。

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

摘录：

<div style="display: table; height: 400px; position: relative; overflow: hidden;"> 
    <div style="position: absolute; top: 50%;display: table-cell; vertical-align: middle;"> 
     <div style="position: relative; top: -50%"> 
     any text<br> 
     any height<br> 
     any content, for example generated from DB<br> 
     everything is vertically centered 
     </div> 
    </div> 
    </div>

（内嵌样式演示）

来源

2010-02-10 15:19:08

0 
<div style="background-color:#006600; width:300px; text-align:center; padding:50px 0px 50px 0px;"> 
<img src="imges/import.jpg" width="200" height="200"/> 
</div>

来源

2012-07-23 08:34:44 Dinoop

+0

你可以给你一些解释吗？ – 2012-10-10 18:32:49

2

正如我也是不断被辜负了跨浏览器CSS，我想在这里提供一个JQuery解决方案。这需要每个图像的父div的高度，除以二，并将其设置为图像和DIV之间的上边距：在

$('div img').each(function() { 
m = Math.floor(($(this).parent('div').height() - $(this).height())/2); 
mp = m+"px"; 
$(this).css("margin-top",mp); 
});

来源

2012-12-17 18:22:37 Cantrelby

8

比方说，你想要把图像（40像素X 40像素） div class =“box”的中心（水平和垂直）。所以，你有以下的html：

<div class="box"><img /></div>

你必须做的是应用CSS：

.box img { 
    position: absolute; 
    top: 50%; 
    margin-top: -20px; 
    left: 50%; 
    margin-left: -20px; 
}

你的div甚至可以改变它的大小，图像将永远是它的中心。

来源

2013-01-06 17:40:13

+0

为什么这不是最佳答案？我在想。太棒了，简单！ ;-) – 2014-09-29 06:52:49

51

另一种方法是在容器div中设置行高，并将图像与vertical-align：middle对齐。

HTML：

<div class="container"><img></div>

CSS：

.container { 
    width: 200px; /* or whatever you want */ 
    height: 200px; /* or whatever you want */ 
    line-height: 200px; /* or whatever you want, should match height */ 
    text-align: center; 
} 

.container > img { 
    vertical-align: middle; 
}

这是从我的头顶。但是我之前使用过这个 - 它应该做到这一点。也适用于旧版浏览器。

来源

2013-01-17 15:37:25 akimsko

+2

据我所见，这是最好的解决方案。奇怪的是，这是页面上的第二个解决方案。这对于所有浏览器都可以轻松实现并运行。在所有IE浏览器的老年人中进行了测试，效果很好。谢谢。 – 2014-02-06 11:57:01

+0

这个应该是被接受的答案。 'display：table-cell;'与这个解决方案相比会产生更多的痛苦 – trushkevich 2014-10-30 13:21:26

3

另一种选择是设置display:block在img，然后设置margin: 0px auto;

img{ 
    display: block; 
    margin: 0px auto; 
}

来源

2013-08-30 21:17:55

+0

适用于HORIZONTALLY居中图像;问题是关于垂直的。 – 2013-10-21 21:30:06

0

接受的答案并没有为我工作。 vertical-align需要一个合作伙伴，以便他们可以在他们的中心对齐。所以我创建了一个空的div，其中包含父div的全部高度，但没有与图像对齐的宽度。两个对象需要使用inline-block才能保持一行。

<div> 
    <div class="placeholder"></div> 
    <img /> 
</div>

CSS：

.class { 
    height: 100%; 
    width: 0%; 
    vertical-align: middle; 
    display: inline-block 
} 
img { 
    display: inline-block; 
    vertical-align: middle; 
}

来源

2013-11-11 16:35:24

1 
div { 

width:200px; 
height:150px; 

display:-moz-box; 
-moz-box-pack:center; 
-moz-box-align:center; 

display:-webkit-box; 
-webkit-box-pack:center; 
-webkit-box-align:center; 

display:box; 
box-pack:center; 
box-align:center; 

} 

<div> 
<img src="images/logo.png" /> 
</div>

来源

2014-01-11 23:45:26

+0

这适用于Firefox和Chrome，但可能不在IE中。另外它已被弃用。他们创建了flex代替：https：//developer.mozilla。org/en-US/docs/Web/Guide/CSS/Flexible_boxes – 2014-02-05 06:44:52

2

图像是在div的中间

div img{ 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    position: absolute; 
    right: 0; 
    top: 0; 
    height:50px; 
    width:50px; 
}

来源

2014-11-19 10:27:47

+0

我在这里阅读并尝试了所有答案......这是为我工作的那个！ – carlosj2585 2017-03-17 22:16:55

0 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script> 
(function ($) { 

$.fn.verticalAlign = function() { 
    return this.each(function(i){ 
    var ah = $(this).height(); 
    var ph = $(this).parent().height(); 
    var mh = Math.ceil((ph-ah)/2); 
    $(this).css('margin-top', mh); 
    }); 
}; 
})(jQuery); 

$(document).ready(function(e) { 


$('.in').verticalAlign(); 


}); 

</script> 

<style type="text/css"> 
body { margin:0; padding:0;} 
.divWrap { width:100%;} 
.out { width:500px; height:500px; background:#000; text-align:center; padding:1px; } 
.in { width:100px; height:100px; background:#CCC; margin:0 auto; } 
</style> 
</head> 

<body> 
<div class="divWrap"> 
<div class="out"> 
<div class="in"> 
</div> 
</div> 
</div> 

</body> 
</html>

来源

2016-01-06 05:27:46

相关问题

 相关问题