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

Привет @Pogrindis спасибо, ты прав. Но изменение этого не решает мою оригинальную проблему, элементы по-прежнему расположены сверху. Высота должна быть в процентах (правая сторона: 90%, внутри 5x20%), чтобы сделать ее максимально реагирующей. – Philipp

Is not pureCSS уже реагирует со встроенными определениями? – Pogrindis

Я бы сохранил его простым, третьим лицом.

Это основная работа рамы, которую я бы использовал.

Я бы не делал изображения масштабируемыми. Слишком много работы для этих wimpy процессоров ARM в смартфонах. Я установил бы ширину левой колонки и pic div

Я поставил временные цветные границы на divs.

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

Количество строк и их высота определяют высоту. Высота каждой строки определяется размером шрифта и дополнением.Проблема в том, что вы никогда не узнаете высоту окна клиента. Я использую свои мониторы в портретном режиме, а мой рост - 1920 пикселей. Согласно Statcounter, в настоящее время самая популярная высота - 768 пикселей. Ваше желание не иметь полос прокрутки, использовать 100% доступной высоты, и JavaSript, вероятно, нереалистичен, поскольку он зависит от высоты окна клиента. – Misunderstood

Это 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 элементы

ответ

Смежные вопросы