如何垂直對齊我的包裝，以便它將在（移動）屏幕上居中顯示？

我正在練習使網頁響應手機屏幕分辨率。我成功的寬度。我如何處理這個高度？我的包裝繼續保持在頂部而不是垂直對齊。如何垂直對齊我的包裝，以便它將在（移動）屏幕上居中顯示？

我見過關於這個問題的很多問題，但是找不到在我的css上指定的解決方案。希望有人能幫助我。

HTML

<body> 
    <div class="wrapper"> 
    <div class="header"> 
    </div> 
    <div class="content"> 
     <a href="http://test"><div id="topleftbox"></div></a> 
     <a href="http://test"><div id="toprightbox"></div></a> 
     <a href="http://test"><div id="bottomleftbox"></div></a> 
     <a href="http://test"><div id="bottomrightbox"></div></a> 
    </div> 
    </div>

CSS

body { 

    } 

    .wrapper { 
    margin: 0 auto; 
    width: 100%; 
    height: 100%; 
    } 

    .header { 
    min-width: 50%; 
    height: 20px; 
    } 

    .content { 
    min-width: 500px; 
    width: 40%; 
    height: auto; 
    margin: 0 auto; 
    } 

    #topleftbox { 
    background: url(..); 
    background-repeat: no-repeat; 
    width: 229px; 
    height: 228px; 
    float: left; 
    } 

    #toprightbox { 
    background: url(...); 
    background-repeat: no-repeat; 
    width: 229px; 
    height: 228px; 
    float: right; 
    } 

etc.

來源

2013-02-26 Patrick K

要使用display:table-cell;您需要模擬完整的表結構。幸運的是，你將不必添加任何額外的標記，因爲你可以對html和body標籤的樣式：

html{display:table;width:100%;height:100%;} 
body{display:table-row;} 
.wrapper{ 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
}

注：這種垂直居中.wrapper的內容，而不是DIV本身。

來源

2013-02-26 22:49:02 Shmiddty

你可以使用display:table渲染你的DIV像表格和表格單元格。

來源

2013-02-26 22:40:20 Mike

不像定心水平有從未有過一個CSS方式垂直居中。唯一的方法是使用javascript來抓取「window.innerHeight」，然後將HTML元素（包裝器）的高度添加到它並將總數除以一半。並將其設置爲新的頂級位置。

此外，你的「包裝」有100％的高度，這應該意味着它填充整個屏幕高度。如果它與屏幕高度相同，它將不居中。它也有100％的寬度，我懷疑「margin：0 auto」在做什麼。

來源

2013-02-26 22:46:26 Krik

垂直對齊CSS中有幾個選項：

1.通過表單元格。（這樣確實可以在IE8 +）

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

2的line-height =元素的高度（如果你有文本的多條線路，這將看起來時髦我想象）

{ 
    height:10em; 
    line-height:10em; 
}

有是更多的選擇，你可以找到，但我相信display: table應該是你現在最好的選擇。

http://www.zann-marketing.com/.../vertically-centering-text-using-css.html https://stackoverflow.com/questions/2939914/

來源

2013-02-26 22:47:12 GordonsBeard

如何垂直對齊我的包裝，以便它將在（移動）屏幕上居中顯示？

回答

相關問題