Итак, я пытаюсь создать общий навигатор, который я могу повторно использовать. Навигатор имеет левый и правый подэлементы, которые плавают влево и вправо соответственно.Вертикально центральные плавающие элементы div, используя только css

Проблема заключается в том, что высота левого и правого подэлементов является переменной в зависимости от содержимого внутри (из-за разного размера шрифта, использования значка и некоторых других элементов).

Я видел много элементов таблицы и psuedo, которые отлично подходят для неплавающих div.

В настоящее время я использую jquery для расчета абсолютного метода высоты и использования позиции для решения этой проблемы.

Есть ли способ достичь этого, используя чистый css?

<div class='navbar'> 
<ul class='nav-left'></ul> //float: left 
<ul class='nav-right'></ul> //float: right 
</div>

EDIT

Я нашел способ не применять поплавок к обоим элементам, поэтому он избавляется от позиции абсолютного метода Вот jsFiddle Link http://jsfiddle.net/dyrotn71/

источник

2015-02-26 naman kalkhuria

Можете ли вы продемонстрировать простой вариант вопроса на http://jsfiddle.net? – Huangism

Привет .. [link] (http://jsfiddle.net/dyrotn71/) .. здесь я сделал небольшую демонстрацию. Это немного лучше, чем использование метода абсолютного позиционирования, но для этого требуется высота двух элементов .., а также второй вид правильно. Использование float в обоих divs не работает. –

Вы можете добавить это в вопрос, отредактировав его. И каков же желаемый результат? Вы хотите, чтобы левое содержимое было вертикально центрировано вправо (в данном конкретном случае)? Как http://jsfiddle.net/dyrotn71/1/? удалите поплавки, зачем вам их плавать? – Huangism

Должен ли он быть поплавок ?

.navbar { 
    position: relative; 
} 

.navbar[class^=nav] { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 

.nav-left { 
    left: 0; 
} 
.nav-right { 
    right: 0; 
}

Это позаботится об этом за вас.

Another solution, no `position: absolute`

.navbar { 
    border: 1px solid; 
    display: block; 
    padding: 10px; 
} 
.navbar:after { 
    content: ''; 
    clear:both; 
    display: table; 
} 

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

.nav-right { 
    transform: translateX(-200%); 
    position: relative; 
    left: 100%; 
}

источник

2015-02-26 20:51:40

это работает ... thanx –

Вертикально центральные плавающие элементы div, используя только css

ответ

Another solution, no position: absolute

Смежные вопросы

Another solution, no `position: absolute`