вертикально выровнять ДИВ фундамент

Question

http://jsfiddle.net/mgLtz5kg/

<div class="row expanded"> 
    <div class="row expanded paddedrow"> 
      <div class="small-12 medium-4 columns paddedcirclediv"> 
      <div class="small-12 columns circlediv"></div> 
     </div> 
     <div class="small-8 columns factoid childbox"> 
      <h3>lorem</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p> 
     </div> 
    </div> 

    <div class="row expanded"> 
     <div class="small-12 medium-4 columns paddedcirclediv"> 
      <div class="small-12 columns circlediv"></div> 
     </div> 
     <div class="small-8 columns factoid"> 
      <h3>ipsum</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p> 
     </div> 
    </div> 
</div> 

Используя основы малые 12, средне-6 стиля обозначение, как вы подходите по вертикали выравнивания содержимого в реагирующих делах. В вышеприведенном коде я хочу, чтобы контент справа был выровнен по центру, чтобы соответствовать круговому div в центре прав.

Я знаю, что это популярный вопрос, но все ответы требуют, чтобы я либо определял ширину, либо конкретно указывал, где на странице находится div, используя теги «сверху» и «слева».

Действительно ли это так, как вы это делаете?

Answer 1

Проверьте этот JSFiddle для решения проблемы: http://jsfiddle.net/61hov4rp/65/. (Протестировано в последних версиях Chrome, Safari, Opera, Firefox, Tor).

Хитрость заключается в использовании FlexBox. Без него вам потребуется, чтобы указать некоторые значения, как предложили другие (поля, paddings, height или widths - это неизбежно), но FlexBox, наконец, позволяет выровнять содержимое по вертикали в гибкой гибкой ширине div.

В будущих проектах вы можете использовать Foundation 6, который поддерживает FlexBox. Проверьте их Flex Grid documentation.