PureCSS垂直中心/中间div元素

时间：2015-02-05 13:39:07

标签： html css alignment center

我正试图将我的div元素（PureCSS）居中以构建这样的网格（100％宽度和高度，没有滚动条）：

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元素垂直居中。 如果你们中的任何人发现了一些代码改进，我也会很高兴，因为这是我第一次构建这样的网格。

提前致谢

2 个答案:

答案 0 :(得分：0)

我会保持简单，没有第三方。

这是我使用的基本框架。

我不会让图片可扩展。对智能手机中那些狡猾的ARM处理器来说，工作量太大了。我将修复左列的宽度和图片div

我在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

答案 1 :(得分：0)

这是我用来垂直和水平居中的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>
相关问题
最新问题