应用错误收集

多个相同高度列的垂直居中没有 flexbox

时间：2016-04-15 17:39:58

标签： html css vertical-alignment

尽管flexbox现在已成为标准，并且大多数用户都有能力使用它，但我想要一个强大的老式，向后兼容的解决方案，使多个列具有相同的高度，其内容也是垂直的居中，不依赖于flexbox。这听起来很容易，但那些熟悉旧式HTML的人知道这不过是直截了当的。

1 个答案:

答案 0 :(得分：0)

这是我分叉的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;}