Question

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

仅在每个div中使用垂直居中的内容。如果不使用绝对值等，是否有一种简单而聪明的方法可以做到这一点？垂直对齐：中间似乎没有做太多，但这个属性并不总是很容易使用。

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

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

对于垂直对齐文本到中间，您可以通过添加line-height属性并将其设置为容器div的相同精确高度来接近它，因此在您的情况下它将是125px或者如果您使用flexbox它可以是完成对齐项目：中心，这是最终代码：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

希望这有帮助！

CSS - 水平和垂直分布div

4 个答案: