在Firefox上使用CSS垂直居中顯示圖像

我想使用HTML/CSS在頁面的垂直中間顯示橫幅，但目前無法完成此操作。圖像始終位於窗口頂部。在Firefox上使用CSS垂直居中顯示圖像

這裏是我的HTML代碼：

<head> 
    <title>Bo-bee</title> 
    <link rel="stylesheet" type="text/css" href="index.css"> 
</head> 
<body> 
     <img class="banner" src="./res/pictures/logo-bee.png" alt="bobee banner"/> 
</body>

，這裏是我的CSS代碼：

html, body{ 
    height:100%; 
} 

.banner{ 
    width:100%; 
} 
img{ 
    vertical-align: middle; 

}

難道我做錯了什麼？注意：我使用的是Firefox 22.0。親切的regargs。

來源

2013-07-30 Bastien Valentin

您的圖像是固定的高度是否正確？ – hungerstar

如果您的''具有固定的寬度和高度，則可以使用絕對定位和負邊距來垂直和水平放置元素。不是最現代的技術，但它適用於所有瀏覽器。 – Adrift

我不知道這是否是一種好的做法，但不是，我的圖像沒有固定大小。我只想在屏幕的垂直中間做一個橫幅，它同時填充屏幕的所有寬度。 –

vertical-align用於inline或table-cell元件，https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align。

因此，讓我們使用table和table-cell的CSS display屬性值。需要將display: table;應用於父元素display: table-cell才能正常工作。http://caniuse.com/css-table

http://jsfiddle.net/uhqMw/1/

CSS

html, body { width: 100%; height: 100%; margin: 0; padding: 0; } 
body { 
    display: table; 
    background-color: blue; 
} 
.banner { 
    display: table-cell; 
    vertical-align: middle; 
} 
img { 
    width: 100%; 
}

HTML

<div class="banner"> 
    <img src="http://lorempixel.com/300/100/" /> 
</div>

來源

2013-07-30 21:14:53 hungerstar

我希望我的圖像在寬度上填滿整個屏幕。所以我將寬度設置爲可用尺寸的100％。這樣做的形象是調整自己的大小，以未知的大小（高度）。如果我理解正確，我不能把margin-top設置爲正確的值，因爲這個值是未知的，不是嗎？ –

我已經更新了我的答案，使用'display：table;'和'display：table-cell;'。 – hungerstar

感謝這是解決方案。我會嘗試瞭解它現在的工作原理。 –

來自：http://www.w3.org/Style/Examples/007/center.en.html

CSS 2級不具備垂直居中事物的性質。在CSS級別3中可能會有一個。但即使在CSS2中，也可以通過組合一些屬性來垂直居中塊。訣竅是指定外部塊將被格式化爲表格單元格，因爲表格單元格的內容可以垂直居中。

下面的示例在具有特定給定高度的塊內部中心段落。一個單獨的示例顯示了一個在瀏覽器窗口中垂直居中的段落，因爲它位於絕對定位且與窗口一樣高的塊內。

DIV.container { 
    min-height: 10em; 
    display: table-cell; 
    vertical-align: middle } 
... 
<DIV class="container"> 
    <P>This small paragraph... 
</DIV>

Example with image here

來源

2013-07-30 21:10:44 PaulProgrammer

使用此解決方案意味着我必須爲我的div修復一個最小尺寸。這樣做會在某些屏幕上出現一些顯示問題，不是嗎？ –

不，我不認爲你必須選擇一個最小尺寸，我這樣做是爲了確保有足夠的空間來真正地集中某些東西。 – PaulProgrammer

赫拉斯，如果我刪除最小高度字段或嘗試按高度替換它：100％;它不再工作。也許我應該嘗試使用一些JS來做到這一點。 –

你能休耕代碼，這可能，如果它不工作，請檢查 this鏈接有用

div {position:relative;} 
    img {position:absolute;top:0;bottom:0;margin:auto;} 
    .image {min-height:50px}

謝謝你，

來源

2013-07-30 21:13:52 Manju

把IMG一個div裏面，然後給股利一類橫幅

設置橫幅寬度爲100％，並且將圖像寬度100％，使其充滿橫幅廣告的DIV容器

HTML：

<title>Bo-bee</title> 
<link rel="stylesheet" type="text/css" href="index.css"> 
</head> 
<body> 
<div class="banner" 
<img src="../res/pictures/logo-bee.png" alt="bobee banner"/> 
</div> 
</body>

CSS：

.banner{ 
    width:100%; 
    margin:0 auto; 
    } 

    .banner img{ 
    width:100%; 
    }

來源

2013-07-30 22:11:41

謝謝你的回答。我已經做到了。它解決了我的寬度問題。但我的主要問題是在寬度爲100％的同時垂直居中圖像... –

這只是：

background-position: center;

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

來源

2015-11-17 02:03:54

在Firefox上使用CSS垂直居中顯示圖像

回答

相關問題