Центр DIV Внутри DIV?

Question

Мне нужна помощь в центрировании одного DIV с помощью DIV.

Я хочу иметь один контейнер DIV, который автоматически ширина занимать всю ширину экрана (назовем его headerContainer

В headerContainer, я хочу еще 3 DIVs:.

• A левый ДИВ (400px в ширину)
• центр DIV (100px в ширину)
• право DIV (200px в ширину).

Я хочу, чтобы центр DIV находился прямо в середине экрана. Прямо сейчас я могу получить его только в центре между левым и правым DIV.

Спасибо за любую помощь.

Answer 1

CSS:

.leftDiv{ 
    float: left; 
    width: 400px; 
} 
.rightDiv{ 
    float: right; 
    width: 200px; 
} 
.centerDiv{ 
    width: 100px; 
    margin: 0 auto; 
} 

HTML:

<div> 
    <div class="leftDiv">left</div> 
    <div class="rightDiv">right</div> 
    <div class="centerDiv">center</div> 
</div> 

DEMO:

Код: http://jsfiddle.net/Xxwrm/6/

Полноэкранный: http://jsfiddle.net/Xxwrm/6/show

Answer 2

Что вы можете сделать, это добавить еще один div на конце, который делает обе стороны равными, и установить visibility: hidden; (не display: none;); таким образом он будет центрировать средний div.

Например, в этом случае у вас будет один @ 400px, другой @ 100px, другой @ 200px и еще один, скрытый, 200px.

С уважением, Richard

Answer 3

Это работает.

.headerContainer{ 
    width:auto !important; 
} 
.leftDiv{ 
    float:left; 
    width:400px; 
} 
.rightDiv{ 
    float:right; 
    width:200px; 
} 
.centerDiv{ 
    display:inline; 
    width:100px; 
    margin-left:auto; 
    margin-right:auto; 
} 

.

<div class="headerContainer"> 
<div class="leftDiv"></div> 
<div class="centerDiv"></div> 
<div class="rightDiv"></div> 
</div> 

Answer 4

<div class="headerContainer"> 
<div class="leftDiv">left</div> 
<div class="rightDiv">right</div> 
<div class="centerDiv">center</div> 
</div> 

Этот HTML с этим CSS будет работать. Я покрасил DIV, чтобы сделать его очевидным.

.headerContainer{ 
    width:auto; 
} 
.leftDiv{ 
    float:left; 
    width:400px; 
    background:pink; 
} 
.centerDiv{ 
    width:100px; 
/* 
    margin-left:auto; 
    margin-right:auto; 
*/ 
    margin:0 auto; 
    background:cyan; 
} 
.rightDiv{ 
    float:right; 
    width:200px; 
    background:lightgray; 
} 

Однако, если экран не 700px широко, вы получите некоторую обертку.

Вот скрипку для него тоже: http://jsfiddle.net/johnpapa/9bN2p/

Answer 5

Вы можете использовать современное решение граждения flex концепции CSS3.

.parent { 
 
    display: flex; 
 
    height: 300px; 
 
    /* Or whatever */ 
 
    background-color: green; 
 
} 
 
.child { 
 
    width: 100px; 
 
    /* Or whatever */ 
 
    height: 100px; 
 
    /* Or whatever */ 
 
    margin: auto; 
 
    /* Magic! */ 
 
    background-color: yellow; 
 
}

<div class="parent"> 
 
    <div class="child ">Div1</div> 
 
</div>