Вертикально центр 2 плавающих divs

Question

У меня проблема. Я хочу, чтобы достичь чего-то вроде этого:

У меня есть DIV с фиксированной высотой и 2 другие дивы внутри, с переменной/небывалую высоту, которую я хочу, чтобы иметь

а) вертикально центрированный
б) плавающие влево/вправо

Прямо сейчас я пробую что-то вроде этого.

<div class="wrapper"> 
    <div class="left">This is left</div> 
    <div class="right">This should be right</div> 
</div> 

.wrapper:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 

.left { 
    display: inline-block; 
    vertical-align: middle; 
} 

.right { 
    display: inline-block; 
    vertical-align: middle; 
} 

Все идеально центрирован, но право DIV находится рядом с левым, а не на правой стороне. Как только я начинаю ставить в

float: right; 

в правый класс, он находится на правой стороне, но не по центру больше. И я понятия не имею, как этого добиться.

Спасибо заранее!

Answer 1

Существует очень тесак ответ на это в http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ Он предлагает этот код:

.element { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Есть и другие решения этой проблемы также, но это самое простое. Затем вы можете просто поплавать в каждом поле слева или справа.

EDIT: еще одно звено с большим количеством способов сделать это http://css-tricks.com/centering-css-complete-guide/

Answer 2

Правильно - плавающий элемент удаляет его из потока документов, поэтому он не может выровняться по своему исходному элементу line-height. Вместо этого поместите обертку div вокруг каждого из двух дочерних элементов и плавайте обертки, слева и справа соответственно. Удостоверьтесь, что их height - 100%, а затем вертикально выровняйте детей внутри них, как вы сейчас.

См. http://jsfiddle.net/conLs2fd/6/.

Answer 3

Попробуйте использовать Flexbox, например,

.wrapper { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    align-content: center; 
} 

.left { 
    display: inline-block; 
    vertical-align: middle; 
    background: red; 
} 

.right { 
    vertical-align: middle; 
    background: green; 
} 

http://jsfiddle.net/hafpuvtq/

Подробнее: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

этот ответ только CSS

.wrapper { 
 
    position: relative; 
 
    height: 200px; 
 
    border: 1px solid gray; 
 
} 
 

 
.left { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: auto; 
 
    background-color: lightgray; 
 
    display:inline-block; 
 
} 
 

 
.right { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: auto; 
 
    background-color: gray; 
 
    display:inline-block; 
 
}

<div class="wrapper"> 
 
    <div class="left child">This is left</div> 
 
    <div class="right child">This should be right</div> 
 
</div>

Answer 5

Вот один из способов сделать это, что включает в себя использование text-align: justify на родительском блоке .wrapper. Если вы можете указать высоту .wrapper, вы можете установить line-height на то же значение высоты.

Добавить псевдоним из height: 0height: 0, чтобы заставить вторую строку для строки, содержащей элементы, что позволит оправдать работу.

.wrapper { 
 
    border: 1px dotted gray; 
 
    height: 100px; /* for demo only */ 
 
    line-height: 100px; 
 
    text-align: justify; 
 
} 
 
.wrapper:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 0; 
 
    width: 100%; 
 
} 
 
.left, .right { 
 
    border: 1px dotted blue; 
 
    line-height: 1.2; 
 
} 
 
.left { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.right { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="wrapper"> 
 
    <div class="left">This is left</div> 
 
    <div class="right">This should be right</div> 
 
</div>

Answer 6

Вы должны установить HTML, элементы кузова из высоты: 100% и поля и отступы 0 вне класса контейнера первого, прежде чем объявить любого из следующих классов:

HTML

<body> 
    <div class="container"> 
     <div class="box1"></div> 
     <div class="box2"></div> 
    </div> 
</body> 

CSS

html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

.container { 
    position: relative; 
    top: 50%; 
    height: 100px; 
} 

.box1 { 
    height: 100px; 
    width: 100px; 
    background-color: red; 
    float: left; 
} 

.box2 { 
    height: 100px; 
    width: 100px; 
    background-color: green; 
    float: right; 
} 

Левый и правый оба должны содержать поплавки; левый квадрат для float: слева; и правый ящик для float: right;