CSS - Горизонтально и вертикально распределять divs

Question

Итак, у меня есть этот заголовок с тремя элементами в них. То, что я хочу, в основном это:

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

только с вертикально центром содержания в каждом из див, а также. Есть ли простой и умный способ сделать это без использования абсолютов и т. Д.? Вертикальное выравнивание: среднее, похоже, мало что делает, но это свойство не всегда легко работать с ним.

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, поэтому в вашем случае это будет 125 пикселей или если вы используете flexbox, это может быть сделано с ALIGN-элементов: центр, а вот окончательный код:

.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

Вы знакомы с Bootstrap?

Это CSS-структура, созданная Twitter.

Поместите это внутри вашей головы -

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

Теперь внутри 2-го ./col-lg-4 DIV все, что содержание будет точно в центре экрана с текстом выровнен влево.

Если вы хотите выровнять отцентрировать текст, заменить

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

с

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

Надеется, что это помогает!