1. 首頁
  2. 問答
  3. 我裏面怎麼DIV

我裏面怎麼DIV

2010-02-10 72 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

相關問題

 相關問題