Как выровнять элементы div с помощью CSS? - PullRequest
Новая
       31

Как выровнять элементы div с помощью CSS?

0 голосов
/ 06 марта 2012

Я использую 1140 CSS-сетку , и у меня есть строка с тремя ячейками, например, так: 

 <div class="row">
    <div class="span4"></div>
    <div class="span4">
       <p class="pText ui-highlight aCent">Some text.</p>
       <div data-role="controlgroup" data-type="horizontal">
           <a href="#" data-role="button" data-inline="true" data-theme="e" data-iconpos="none">data</a>
       </div>
    </div>  
    <div class="span4">
      <ul data-role="listview" data-inset="true" data-divider-theme="a" data-theme="c">
         <li data-role="list-divider" class="ui-corner-top input-divider"><span class="ui-divider-text">header</span></li> 
         <li data-icon="false" >Some<span class="ui-li-count pusher">12</span></li>
         <li data-icon="false" >Thing<span class="ui-li-count pusher">34</span></li>
         <li data-icon="false" >Wicked<span class="ui-li-count pusher">45</span></li>
      </ul>
   </div>
 </div>

Я ищу способ вертикально центрировать три div.span4 элементов и не могу заставить его работать ...

У меня этот CSS из 1140: 

  .row {
     margin: 0.5em auto;
     overflow: hidden;
     width: 100%;
     }
   .span4 {
     width: 28%;
     margin-right: 2%;
     }

Спасибо за любые советы.Я иду в отчаяние здесь ..

1 Ответ

0 голосов
/ 06 марта 2012

Если вы точно не знаете, насколько высокими будут эти <div> (то есть вы можете установить явную высоту), вы не сможете сделать это с простым ванильным CSS . Обычный HTML-поток имеет элементы, выровненные по вертикали вверх - это так.

Есть несколько способов:

1) Переосмыслите свой дизайн. Они действительно должны быть вертикально центрированы? Можно ли добиться дизайна со всем, выровненным сверху?

2) Используйте JavaScript - используя jQuery или что-то подобное, вы можете получить высоту самого высокого .span4, а затем вычислить необходимые поля для других <div>. Однако это становится грязным и, очевидно, не сработает, если у кого-то JS выключен.

3) (Я не хочу это предлагать) Попробуйте преобразовать в таблицы. Да, это примерно 1998 год, но вы можете установить атрибут вертикального выравнивания для ячеек таблицы. Это не семантическое, и будет трудно поддерживать, и все Standaristas там будут смеяться над вами. ; )

...