CSS - 水平和垂直分布 div答案

【问题标题】：CSS - Horizontally and vertically distribute divsCSS - 水平和垂直分布 div
【发布时间】：2016-05-23 19:27:05
【问题描述】：

所以我得到了这个包含三个元素的标题。我想要的基本上是这样的：

http://jsfiddle.net/zktbfmqo/2/

仅在每个 div 中也包含垂直居中的内容。有没有一种简单而聪明的方法可以在不使用绝对值等的情况下做到这一点？ Vertical-align: middle 似乎没有多大作用，但该属性并不总是易于使用。

HTML：

<div id="container">
    <div class="box1">Text</div>
    <div class="box2">Text</div>
    <div class="box3">Text</div>
    <span class="stretch"></span>
</div>

CSS：

#container {
    border: 2px dashed #444;
    height: 125px;

    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    min-width: 612px;
}

.box1, .box2, .box3 {
    width: 150px;
    height: 125px;
    vertical-align: middle;
    display: inline-block;
    *display: inline;
    zoom: 1;
    text-align: center;
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

【问题讨论】：

标签： css alignment vertical-alignment text-align

【解决方案1】：

首先，您可以使用 Flexbox 以更好的方式实现相同的结果。

对于将文本垂直对齐到中间，您可以简单地通过添加 line-height 属性并将其设置为与容器 div 相同的高度，因此在您的情况下它将是 125px，或者如果您使用 flexbox，它可以是完成 align-items: center ，这是最终代码：

.wrapper {
display: -webkit-flex;
display: flex;

-webkit-flex-flow: row nowrap; /* Safari 6.1+ */
flex-flow: row nowrap;

-webkit-justify-content: space-between; /* Safari 6.1+ */
justify-content: space-between;
  
font-weight: bold;

height: 125px;
min-width: 612px;
padding: 5px;

border: 2px dashed #444;
}

.wrapper > div{
display: -webkit-flex;
display: flex;
-webkit-flex-basis: 150px;
flex-basis: 150px;
justify-content: center;
align-items: center;

}
.aside-1, .aside-3{
background: #ccc
}
.aside-2{
background: #0ff;
}

<div class="wrapper">
   <div class="aside aside-1">text1</div>
   <div class="aside aside-2">text2</div>
   <div class="aside aside-3">text3</div>
</div>

【讨论】：

我去了这个，并为 IE9 等的 flexbox 尝试了一个 polyfill。虽然还没有测试过，但是 flexbox 很棒:)

【解决方案2】：

Flexbox 助你一臂之力！

好资源：

https://philipwalton.github.io/solved-by-flexbox/

https://github.com/philipwalton/flexbugs

#container {
    display: flex; /* magic maker */
    justify-content: space-between; /* set equal space between boxes */
    border: 2px dashed #444;
    height: 125px;
    
    /* just for demo */
    min-width: 612px;
}

.box1, .box2, .box3, .box4 {
    display: flex; /* magic maker */
    /*  
        shorthand for flex-grow, flex-shrink, and flex-basis properties
        we don't want the boxes to grow or shrink, and the basis is the explicit
        width we want them
    */
    flex: 0 0 150px;
    justify-content: center; /* horizontally center text within */
    align-items: center; /* vertically center text within */
    height: 125px;
}

.box1, .box3 {
    background: #ccc
}
.box2, .box4 {
    background: #0ff
}

<div id="container">
    <div class="box1">Text</div>
    <div class="box2">Text</div>
    <div class="box3">Text</div>
</div>

【讨论】：

阅读 OP 的代码我认为 OP 想要支持旧浏览器，所以 flexbox 在这种情况下可能不是一个好的解决方案。

【解决方案3】：

您可以使用display:table/table-cell 并使用border-collapse/spacing + margin 的解决方法，您将获得所需的输出。

#wrap {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  overflow:hidden;
  /* just for demo */
  width: 612px;
}
#container {
  margin: 0 -81px; /*must be equal to border-spacing */
  
}
#table {
  display: table;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 81px 0;
  width: 100%;
}
.box1,
.box2,
.box3,
.box4 {
  width: 150px;
  height: 125px;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}
.stretch {
  width: 100%;
  vertical-align: middle;
  display: table-cell;
}
.box1,
.box3 {
  background: #ccc
}
.box2,
.box4 {
  background: #0ff
}

<div id="wrap">
  <div id="container">
    <div id="table">
      <div class="box1">Text</div>
      <div class="box2">Text</div>
      <div class="box3">Text</div>
      <span class="stretch"></span>
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

你熟悉 Bootstrap 吗？

它是 Twitter 制作的 CSS 框架。

把这个放在你的脑海里 -

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
</head>

在你的身体中使用它来看看它的作用，上面有很棒的文档。

<div class="container"> <!-- Creates margin -->
  <div class="row"> <!-- Read docs on rows, they're awesome! -->
    <div class="col-lg-4">   <!-- 1 -->
      <!-- Just to take up space -->
    </div>
    <div class="col-lg-4">   <!-- 2 -->
      <!-- YOUR CONTENT GOES HERE -->
    </div>
    <div class="col-lg-4">  <!-- 3 -->
    <!-- Just to take up space -->
    </div>
  </div> <!-- ./row -->
</div> <!-- ./container -->

现在在第二个 ./col-lg-4 div 内，所有内容都将在屏幕中完美居中，文本左对齐。

如果要居中对齐文本，请替换

<div class="col-lg-4"> <!-- 2 -->

与

<div class="col-lg-4 text-center"> <!-- 2 -->

希望这会有所帮助！

【讨论】：