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

希望這有助於！