Как центрировать три Div внутри другого Div

это пробовало мое терпение около часа, поэтому я подумал, что попрошу.Как центрировать три Div внутри другого Div

Мне нужно иметь три divs, расположенных внутри другого div, который находится внутри другого div lol. Вот как выглядит код, который у меня есть.

HTML

<div id="frontnav"> 
    <div id="front1" class="frontboxes"> 
     <h2>Gold</h2> 
    </div> 
    <div id="front2" class="frontboxes"> 
     <h2>Green</h2> 
    </div> 
    <div id="front3" class="frontboxes"> 
     <h2>Blue</h2> 
    </div> 
</div>

CSS

/* FRONT PAGE BOXES */ 

#frontnav { 
    width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
    height: 300px; 
    transition: all 2s; 
    -moz-transition: all 2s; 
/* Firefox 4 */ 
    -webkit-transition: all 2s; 
/* Safari and Chrome */ 
    -o-transition: all 2s; 
/* Opera */; 
} 

#front1 { 
    text-align: center; 
    float: left; 
    height: 200px; 
    width: 30%; 
    box-shadow: 0px 0px 19px #615D69; 
} 

#front2 { 
    text-align: center; 
    float: left; 
    height: 200px; 
    width: 30%; 
    box-shadow: 0px 0px 19px #615D69; 
} 

#front3 { 
    text-align: center; 
    float: left; 
    height: 200px; 
    width: 30%; 
    box-shadow: 0px 0px 19px #615D69; 
} 

.frontboxes { 
    margin: 6px; 
}

источник

2012-04-13 Matt Douglas

Если вы разместите изображение, которое показывает, что вы хотите, это будет легче обеспечить правильный ответ. – TLS

Я забыл упомянуть, что я использую Wordpress и стилю страницы внутри. , Все эти предложения великолепны, но они не работают. –

DIV элемент может быть единственным центром, установив маржу CSS свойство, как

margin: 0px auto;

источник

2012-04-13 00:36:47 irfanmcsd

Hrm. , в этом случае не работает. , , –

Я взял пароль для защиты со страницы - http://www.morrisentertainment.ca/wp/ –

Вы имеете в виду выравнивание по центру всех трех разделов, упомянутых на веб-сайте по вертикали? – irfanmcsd

text-align:center; декларация должна быть на внешней DIV, т.е. frontnav в вашем примере.

источник

2012-04-13 00:29:40 dotancohen

Это, похоже, не работает? –

Возможно, вам придется удалить декларации 'margin' на том же div. – dotancohen

Я сделал это. , кажется, не имеет значения. , , Это будет вести меня батти, должно быть 10 минут работы LOL. Спасибо за помощь! Любая другая идея? –

Изменить последнее правило:

.frontboxes { 
    margin: 6px auto; 
}

и удалить float: left; с.

источник

2012-04-13 00:34:48 Supr

Вот что я подумал. Однако это заканчивается тем, что три div, которые сложены вместо бок о бок –

Как центрировать три Div внутри другого Div

ответ

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