複数の同じ高さの列の垂直センタリング*フレックスボックスなし

-2

フレックスボックスはほぼ標準ですが、ほとんどのユーザーはこれを使用することができますが、複数の列を持つための堅牢な旧式の、同じ高さであり、その内容もフレックスボックスに依存しない垂直方向の中心にある。それは簡単だと思うが、昔の学校のhtmlに精通している人は、これが何か簡単であることを知っている。ここで複数の同じ高さの列の垂直センタリング*フレックスボックスなし

出典

2016-04-15 CoderScissorhands

私はフォークcodepenがgitter.imユーザー@jdtdesignsによって作成されたコードで、次のとおりです。http://codepen.io/ihatecoding/pen/WwOyya

ここで彼が書いたHTMLです：

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <header> 
    <h1 class="text-center">Header</h1> 
    </header> 
    <section class="main"> 
    <div class="left"> 
     <nav> 
     <h3>Menu</h3> 
     <a href="#">Home</a> 
     <a href="#">Contact</a> 
     <a href="#">About</a> 
     <a href="#">Support</a> 
     <a href="#">Home</a> 
     <a href="#">Contact</a> 
     <a href="#">About</a> 
     <a href="#">Support</a> 


     </nav> 
    </div> 
    <div class="center"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nulla quibusdam adipisci, enim libero ducimus, et? Porro ex in temporibus. Temporibus expedita aliquam, doloribus, perspiciatis in tempora soluta repellendus voluptatum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et, quasi eligendi voluptatem praesentium repellendus! Cupiditate officia culpa placeat. Molestiae nulla laborum, est magni, cupiditate qui ullam eum aliquam consequuntur.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste consequuntur ea accusantium nemo amet. Sint, suscipit assumenda eos, exercitationem perferendis adipisci numquam sunt, nesciunt repellendus fugit vel ut saepe eligendi.</p>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p> 

    </div> 
    <div class="right"> 
     <div class="ad"> 
     <h1>Ad</h1> 
     </div> 
     <div class="ad"> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     <h1>Ad</h1> 
     </div> 
    </div> 
    </section> 
    <footer> 
    <h1 class="text-center">Footer</h1> 
    </footer> 
</body> 
</html>

をここでは、彼が書いたCSSです：

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

html, body { 
    height: 100%; 
} 

.text-center { 
    text-align: center; 
} 

.main { 
    display: table; 
    width: 100%; 
} 
.main > * { 
    display: table-cell; 
    vertical-align: middle; 
} 

.left, .right { 
    width: 20%; 
    background: #4385db; 

    text-align: center; 
    padding: 40px; 
} 

.center { 
    width: 60%; 
    padding: 20px; 
} 

header, footer { 
    background: #9842a5; 
    padding: 20px; 
} 

nav > * { 
    display: block; 
} 
a {margin:20px;}

出典

2016-04-15 17:39:58 CoderScissorhands

複数の同じ高さの列の垂直センタリング*フレックスボックスなし

答えて

関連する問題