如何中心三个Div在另一个Div [英] How to Center three Div's inside another Div

问题描述

这一直在尝试我的耐心约一个小时，所以我想我会问。

我需要有三个div， div lol。

  
 < div id =frontnav> 
< div id =front1class =frontboxes> 
< h2>金< / h2> 
< / div> 
< div id =front2class =frontboxes> 
< h2>绿色< / h2> 
< / div> 
< div id =front3class =frontboxes> 
< h2>蓝色< / 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和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; 
} 
  

解决方案

div元素通过将margin css属性设置为

  margin：0px auto; 
  

this has been trying my patience for about an hour so I thought I would ask.

I need to have three divs, centered inside another div that is inside another div lol. Here is what the code I have looks like.

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;
}

解决方案

div element can only be center by setting margin css property as

margin: 0px auto;

这篇关于如何中心三个Div在另一个Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！