PureCSS垂直中心/中間的div元素

我想我居中的div元素（PureCSS）建立這樣一個電網（100％的寬度和高度，沒有滾動條）：PureCSS垂直中心/中間的div元素

Container

現在我需要將所有元素垂直和水平居中對齊。

這是我的HTML代碼：

<div class="pure-g" style="height:100%;"> 
     <div class="pure-u-1-5" style="height:90%;"> 
     <div class="pure-g" style="height:50%;"> 
      <div class="pure-u-1-1 visible"><img src="img/logo.png" alt="Logo" style="width:100%;"></div> 
      <div class="pure-u-1-1 visible"><img src="img/ad.png" alt="AD" style="width:100%;"></div> 
     </div> 
     </div> 
     <div class="pure-u-4-5" style="height:90%;"> 
     <div class="pure-g" style="height:100%;"> 

      <div class="pure-u-1-1" style="height:20%;"> 
      <div class="pure-g" style="height:100%;"> 
       <div class="pure-u-1-6 news"><p>PIC</p></div> 
       <div class="pure-u-1-3 news"><p>TITLE</p></div> 
       <div class="pure-u-5-12 news"><p>DESCRIPTION</p></div> 
       <div class="pure-u-1-12 news"><p>ID</p></div> 
      </div> 
      </div> 

      <div class="pure-u-1-1" style="height:20%;"> 
      <div class="pure-g" style="height:100%;"> 
       <div class="pure-u-1-6 news"><p>PIC</p></div> 
       <div class="pure-u-1-3 news"><p>TITLE</p></div> 
       <div class="pure-u-5-12 news"><p>DESCRIPTION</p></div> 
       <div class="pure-u-1-12 news"><p>ID</p></div> 
      </div> 
      </div> 

      <div class="pure-u-1-1" style="height:20%;"> 
      <div class="pure-g" style="height:100%;"> 
       <div class="pure-u-1-6 news"><p>PIC</p></div> 
       <div class="pure-u-1-3 news"><p>TITLE</p></div> 
       <div class="pure-u-5-12 news"><p>DESCRIPTION</p></div> 
       <div class="pure-u-1-12 news"><p>ID</p></div> 
      </div> 
      </div> 

      <div class="pure-u-1-1" style="height:20%;"> 
      <div class="pure-g" style="height:100%;"> 
       <div class="pure-u-1-6 news"><p>PIC</p></div> 
       <div class="pure-u-1-3 news"><p>TITLE</p></div> 
       <div class="pure-u-5-12 news"><p>DESCRIPTION</p></div> 
       <div class="pure-u-1-12 news"><p>ID</p></div> 
      </div> 
      </div> 

      <div class="pure-u-1-1" style="height:20%;"> 
      <div class="pure-g" style="height:100%;"> 
       <div class="pure-u-1-6 news"><p>PIC</p></div> 
       <div class="pure-u-1-3 news"><p>TITLE</p></div> 
       <div class="pure-u-5-12 news"><p>DESCRIPTION</p></div> 
       <div class="pure-u-1-12 news"><p>ID</p></div> 
      </div> 
      </div>  

     </div> 
     </div> 
     <div class="pure-u-1-1 marquee">NEWSTICKER (jQuery marquee)</div> 
    </div>

這裏是我的CSS：

*{font-family:'Raleway', sans-serif;} 

h1, h2, h3, p {color:#fff;} 

body, html { 
    overflow:hidden; 
    height: 100%; 
    padding:0px; 
} 

div { 
    /* 
    border:1px solid; 
    margin:-1px; 
    */ 
} 

.news { 
    height:100%; 
    position:relative; 
    background:#444; background:rgba(0,0,0,.5); 
    margin:0px 0px 0px 0px; 
    border-radius:0px; 
    margin-bottom:0px; 
} 

.visible { 
    height:100%; 
    position:relative; 
    background:#444; background:rgba(0,0,0,.5); 
    margin:0px 0px 0px 0px; 
    border-radius:0px; 
    margin-bottom:0px; 
} 

.news p { 
    text-align: center; 
    vertical-align: middle; 
    margin:15px; 
    height:100%; 
} 

.marquee { 
    height:100%; 
    position:relative; 
    background:#444; background:rgba(0,0,0,.5); 
    margin:0px 0px 0px 0px; 
    padding:0px; 
    border-radius:0px; 
    margin-bottom:0px; 
    font-family:'Raleway', sans-serif; 
    color:#fff; 
}

結果是這樣的： Container_now

我讀了一些線程這個問題，但沒有他們似乎爲我工作讓div元素垂直居中。我也很高興，如果你們中的任何一位發現一些代碼改進，因爲這是我第一次構建這樣的網格。

在此先感謝

來源

2015-02-05 Philipp

您的'.news p'對於高度爲100％的父級高度爲100％..使用PX高度並將線高分配爲相同。 – Pogrindis 2015-02-05 13:44:44

嗨@Pogrindis謝謝你，你是對的。但改變它並不能解決我最初的問題，這些項目仍然位於最前面。高度必須以百分比表示（右側：90％，內部5x20％），以儘可能快地響應 – Philipp 2015-02-05 14:04:30

Isnt pureCSS已經對內置定義進行響應了嗎？ – Pogrindis 2015-02-05 14:10:50

我會保持簡單，沒有第三方。

這是我使用的基本框架工作。

我不會讓圖像可縮放。對智能手機中那些懦弱的ARM處理器來說工作太多。我會修復左列和圖片的寬度

我在div上放置了臨時的彩色邊框。

CSS

#col1{width:14%;position:absolute;top:0;left:0;} 
#col2{width:84%;position:absolute;top:0;right:0;} 
#logo{width:200px;height:200px;} 
.row{width:100%;border:4px solid #000;display:inline-block;} 
.pic{width:15%;border:1px solid #00f;display:inline-block;} 
.title{width:30%;border:1px solid #f00;display:inline-block;} 
.desc{width:40%;border:1px solid #0ff;display:inline-block;} 
.id{width:10%;border:1px solid #f0f;display:inline-block;} 
#marquee{height:6em;}<br>

HTML

<div id="col1"> 
<div id="logo"><img src="img/logo.png" alt="Logo"></div> 
<div id="ad"><img src="img/ad.png" alt="AD" ></div> 
</div> 
<div id="col2"> 
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div> 
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div> 
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div> 
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div> 
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div> 
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div> 
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div> 
<div class="row"><div id="marquee">Breaking News</div></div></div> 
</div>

screenshot

來源

2015-02-05 14:55:47 Misunderstood

嗨，很抱歉我遲到的答覆，並非常感謝你的簡化。我總是保持簡單的風扇。我嘗試過並喜歡你的解決方案，但是如何獲得＃col2以使用可用高度的100％？在此先感謝 – Philipp 2015-02-16 11:50:53

行數及其高度決定高度。每行的高度由字體大小和填充決定。問題是你永遠不會知道客戶端窗口的高度。我在肖像模式下使用我的顯示器，我的身高是1920px。據Statcounter稱，目前最受歡迎的身高是768px。您希望沒有滾動條，使用100％的可用高度，並且沒有JavaSript可能不現實，因爲它取決於客戶端窗口高度。 – Misunderstood 2015-02-17 15:08:12

這是CSS/HTML我使用的東西中心垂直和水平：

<html> 
<head> 

<style type="text/css" media="screen"> 
.center-outter { 
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 
.center-middle { 
    display: table-cell; 
    vertical-align: middle; 
} 
.center-inner { 
    margin-left: auto; 
    margin-right: auto; 
    /*width:200px;*/ 
} 

.whatever { 
    width:200px; 
    background:#efefef; 
} 
</style> 

</head> 
<body> 

    <div class="center-outter"> 
     <div class="center-middle"> 
      <div class="center-inner whatever"> 
       <div>This should be centered vertically and horizontally</div> 
      </div> 
     </div> 
    </div> 

</body> 
</html>

來源

2015-02-19 02:52:09 bob

PureCSS垂直中心/中間的div元素

回答

相關問題