html - центру - сетка inline block




Центр inline-block div в родителе при игнорировании плавающих элементов (2)

Я пытаюсь центрировать встроенный div в своем родителе. Родительский элемент также имеет дочерний div который плавает вправо. Из-за правого выровненного div мой центрированный div смещается влево. Я хочу центрировать средний div независимо от положения / размера плавающего, как изображение ниже.

Текущая установка имеет как внутренние div внутри родителя, но я предполагаю, что правильный путь состоит в том, чтобы выровнять по правому краю div с абсолютной позицией?

Кроме того, у меня есть несколько экземпляров родительского div на одной странице.

Каков наилучший способ достичь этого результата?

Текущий код

<div id="parent" style="text-align:center">
    <div style="display:inline-block;"> ... </div>
    <div style="display:inline-block;float:right"> ... </div>
</div>

установить правый div css

position:absolute;
right:0;

относительно родительского div

#parent {
position:relative;
}

position:absolute - единственный способ

DEMO http://jsfiddle.net/kevinPHPkevin/u4FWr/1/

.center {
    display:inline-block;
    position: absolute;
    left:0;
    right:0;
}

РЕДАКТИРОВАНИЕ

не уверен, что это уже было предложено

Или вы можете absolute: position; вместо правого

DEMO http://jsfiddle.net/kevinPHPkevin/u4FWr/3/

.right {
    display:inline-block;
    position: absolute;
    right:0;
}




design