Вопрос по css, html – Как центрировать три Div внутри другого Div

0

это пыталось мое терпение в течение часа, поэтому я подумал, что спросить.

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

HTML

<code><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>
</code>

CSS

<code>/*  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;
}
</code>
Я забыл упомянуть, что использую WordPress и стилизую страницу внутри. , Все эти предположения хороши, но они не работают. Matt Douglas
Если вы разместите изображение, которое показывает, что вы хотите, будет легче дать правильный ответ. TLS

Ваш Ответ

3   ответа
0

установив свойство margin css как

margin: 0px auto;
в этом случае вы должны использовать служебный класс, например .split {clear: both; } внутри каждого элемента div, чтобы удалить плавающий элемент, оставьте следующий элемент вертикально выровненным.
Я снял защиту паролем со страницы -morrisentertainment.ca/wp Matt Douglas
Хмм. , не работал в этом случае. , , Matt Douglas
Я имею в виду горизонтально по центру, т.е. внешний край - & gt; | __ {div} {div} {div} __ | & lt; - внешний край Matt Douglas
Вы имеете в виду выравнивание по центру всех трех элементов, упомянутых на сайте, по вертикали?
0

text-align:center; объявление должно быть на самом внешнем div, т.е.frontnav в вашем примере.

Я так и сделал. , кажется, не имеет значения. , , Это доведет меня до безумия, должно быть, это 10-минутная работа, лол. Спасибо за помощь! Любая другая идея? Matt Douglas
Попробуйте устранитьfloat и использовать статическую позицию. Попробуйте поместить один div в центр, затем, возможно, поместите три div в этот центрированный div и отрегулируйте размер по мере необходимости.
Возможно, вам придется удалитьmargin декларации о том же Div.
Да, это было целью, я могу соответствовать статическим размерам, однако из-за характера реагирования на носители я пытаюсь использовать% ширины вместо заданной ширины. Может быть, я должен просто попытаться установить его, а затем установить разную ширину для разных размеров экрана? Matt Douglas
Это не похоже на работу? Matt Douglas
0

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

.frontboxes {
    margin: 6px auto;
}

и удалитеfloat: left;s.

Я так и думал. Однако это заканчивает мной тремя div'ами, которые сложены, а не рядом Matt Douglas

Похожие вопросы