CSS - 水平和垂直分布div

Question

所以我有这个头里面有三个元素。 我想基本上是这样的：

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

只有在每一个的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，它可以与对齐项完成：中心，这里是最后的代码：

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

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

你熟悉的引导？

这是一个由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 class="col-lg-4"> <!-- 2 --> 

与

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

希望这有助于！