的網站標題和底部之間垂直我目前水平居中的圖像和垂直使用：中心的圖像窗口

.centeredImage 
    { 
    text-align:center; 
    display:block; 
    } 

    .centeredImage img { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
}

HTML：

<body> 

    <p class="centeredImage"><img id ="img" src="smallslide1.png"></p> 

</body>

這一直工作正常，但我有現在添加標題：

#header { 
    background: #e9e6e6; /* Here set your colour */ 
    height: 55px; 
    width: 100%; 
    left: 0; 
    position: absolute; 
/* box-shadow: 0px 2px 2px #888888;*/ 
}

如果我調整窗口大小或窗口沒有設置完美的大小thi以圖片爲中心的圖片將與標題重疊。我真正想要的是它在標題的底部和窗口的底部之間垂直居中。我嘗試調整居中的img頂部/底部，但沒有任何運氣。有人能給我一些關於如何去解決這個問題的建議嗎？

來源

2015-05-01 KexAri

一個小提琴會很好......但從我理解的也許你應該增加.centeredImage img的頂級值爲55px？ –

您可能想要查看display：table-cell和display：table的用法，以便進行垂直對齊。通常是實現它的最簡單方法之一。 –

這樣的事情？ http://jsfiddle.net/moogs/7avr1ubc/ Callum的解決方案也可以工作 –

我認爲你需要像如下：

body{ 
 
    padding:0; 
 
    margin:0; 
 
} 
 
.centeredImage 
 
    { 
 
    text-align:center; 
 
    display:block; 
 
    } 
 

 
    .centeredImage img { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 55px; 
 
    bottom: 0; 
 
    margin: auto; 
 
} 
 
#header { 
 
    background: #e9e6e6; /* Here set your colour */ 
 
    height: 55px; 
 
    width: 100%; 
 
    left: 0; 
 
    top:0; 
 
    position: absolute; 
 
/* box-shadow: 0px 2px 2px #888888;*/ 
 
}

<div id="header"></div> 
 
<p class="centeredImage"><img id ="img" src="smallslide1.png"></p>

檢查Fiddle.希望它能幫助。

來源

2015-05-01 09:11:05 ketan

前只需添加div標籤，並使用一些風格例子

<body> 
<div> 
<p><img src="sample.png" alt="test"></p> 
</div> 
</body>

風格

div{display: inline-table;text-align: center} 
div p{display: table-cell;vertical-align: middle;}

而且使用填充頂：{頭高度應放在這裏} PX

例如如果標題高度是50px;

div{padding-top: 50px}

來源

2015-05-01 09:12:29

試過這樣無法讓它工作：我設置了一個小提琴jsfiddle.net/#&togetherjs=Fq8Q9g7o25 – KexAri

中心的圖像窗口

回答

風格

相關問題