CSS

Question

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

仅在每个 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
}

Answer 1

您可以使用 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>

Answer 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>

Answer 3

你熟悉Bootstrap吗？

它是 Twitter 制作的 CSS 框架。

把这个放在你的脑海里 -

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

在您的 body 中使用它来查看它的作用，上面有很棒的文档。

<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 -->

希望对您有所帮助！

Answer 4

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

对于垂直对齐文本到中间，您可以通过添加行高属性并将其设置为与容器 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>

CSS - 水平和垂直分布div

CSS - Horizontally and vertically distribute divs

alignment

vertical-alignment

text-align