试图将包装div中的元素和div对齐

时间：2016-04-16 23:07:07

标签： html5 css3 centering 

#wrapper {
    display: inline-block;
    margin: 0 auto;
    width: 100%;
    display: -webkit-box; /* This tells the chrome browser to use the tools for flexible boxes */
                  -webkit-box-orient: horizontal;
                  -webkit-box-flex: 1;
                  -webkit-box-align: center;
    display: -moz-box;
                  -moz-box-orient: horizontal;
                  -moz-box-flex: 1; 
    
    }
section {
         max-width: 760px; 
         margin-top: 20px;
         background-color: #121516;
         border-radius: 50px;
         padding: 10px;
         box-shadow: 5px 5px 10px 10px #000;
         display: -webkit-box; /* This tells the chrome browser to use the tools for flexible boxes */
                  -webkit-box-orient: vertical;
                  -webkit-box-flex: 2;
         display: -moz-box;
                  -moz-box-orient: vertical;
                  -moz-box-flex: 1; 
        order: 2;
        text-align: center;    
        }

aside  {      
         border-radius: 20px;
         margin-top: 15px;
         padding: 5px;
         color: #5F7278;
         width: auto;
         float: right;
         font-size: 85%;
         text-align: center;
         display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-box-flex: 1;
         display: -moz-box;
         		  -moz-box-orient: vertical;
         		  -moz-box-flex: 1;
         order: 3;
         position: absolute;
         }
 


#left-aside {
	display: -webkit-box;
             -webkit-box-orient: vertical;
             -webkit-box-flex: 1;
    display: -moz-box;
    		 -moz-box-orient: vertical;
    		 -moz-box-flex: 1;
    order: 1;
    max-width: 150px;
}
.box1  {
    width: auto;
    max-width: 800px;
    height: auto;
    padding: 16px;
    border-right: 1px solid #000;
    border-radius: 20px;
    box-shadow: 15px 15px 15px #000 inset;
    line-height: 20px;
    flex: 1;
    margin: 0px;
    }

.box2   {
    width: auto;
    max-width: 300px;
    float: left;
    margin-left: 40px;
    margin-bottom: 40px;
    padding: 14px;
    border-radius: 20px;
    box-shadow: 15px 15px 15px #000 inset;
    line-height: 25px;
    flex: 1;
}

.box3   {
    width: auto;
    max-width: 300px;
    float: right;
    margin-right: 40px;
    padding: 14px;
    border-radius: 20px;
    box-shadow: 15px 15px 15px #000 inset;
    line-height: 23px;
    flex: 1;
}

.box4 {
    width: auto;
    padding: 16px;
    padding-bottom: 1px;
    margin-left: 20px;
    margin-bottom: 10px;
    border-right: 1px solid #000;
    border-radius: 20px;
    box-shadow: 15px 15px 15px #000 inset;
    line-height: 22px;
    flex: 1;
    }

.box4 a {
    font-size: 1.2em;
}

.box5  {
    width: auto;
    margin-top: 20px;
    padding: 16px;
    margin-bottom: 10px;
    border-right: 1px solid #000;
    border-radius: 20px;
    box-shadow: 15px 15px 15px #000 inset;
    flex: 1;
    }
.box5 p {
    max-width: 500px;
    margin: 0 auto;
    line-height: 20px;
}
.box5 form {
    margin-top: 20px;
}
.box6  {
    width: auto;
    max-width: 660px;
    height: auto;
    padding: 16px;
    border-right: 1px solid #000;
    border-radius: 20px;
    box-shadow: 15px 15px 15px #000 inset;
    line-height: 20px;
    flex: 1;
    margin-left: 40px;
    clear: both;
    }
<div id="wrapper">  
   
      <div id="left-aside">
          Left aside
      </div>
   
   		 <section><!-- Main part of your page -->

				<h1>Main Section with two articles</h1>

					<article class="first"><!-- Informational section & can use multiple times -->
                          Article 1
						

					</article>

		<!-- Slideshow -->
	
	 

			<article class="second"><!-- Informational section & can use multiple times -->
				
				Article 2
   		 


			</article>

		 </section>


		 <aside>
		  
           Aside

     </aside> 
     
 	</div>

我试图将我的元素和div放在我的包装div中心，我尝试过：

text-align: center
margin: 0 auto

但似乎没有一个似乎工作，因为我在我的CSS中使用moz-box和webkit-box，但这些中心都没有对齐父节点中的孩子。我不能为我的生活让这个工作，我也尝试过：

justify-content: center
align-items: center

然而，它没有任何一个位于父母的中心，它被卡在屏幕的左侧。

作为一个说明，如果我要删除：

display: -moz-box;
display: -webkit-box;
从父母和子元素

然后我可以很容易地将它全部对齐，但是我将失去页面的响应性，我试图使其尽可能地跨平台友好。

2 个答案:

答案 0 :(得分：2)

SELECT uf.poll_id, p.creator_id, uf.repoller_id, uf.date_created
FROM
user_feed uf JOIN poll p
ON uf.poll_id=p.id
AND uf.user_id=23
ORDER BY date_created DESC;

#wrapper {
    display: inline-block;
    margin: 0 auto;
    width: 100%;
    display: -webkit-box; /* This tells the chrome browser to use the tools for flexible boxes */
                  -webkit-box-orient: horizontal;
                  -webkit-box-flex: 1;
                  -webkit-box-align: center;
    display: -moz-box;
                  -moz-box-orient: horizontal;
                  -moz-box-flex: 1; 
    
    }
section {
         max-width: 760px; 
         margin-top: 20px;
         background-color: #121516;
         border-radius: 50px;
         padding: 10px;
         box-shadow: 5px 5px 10px 10px #000;
         display: -webkit-box; /* This tells the chrome browser to use the tools for flexible boxes */
                  -webkit-box-orient: vertical;
                  -webkit-box-flex: 2;
         display: -moz-box;
                  -moz-box-orient: vertical;
                  -moz-box-flex: 1; 
        order: 2;
        text-align: center;    
        }

aside  {      
         border-radius: 20px;
         margin-top: 15px;
         padding: 5px;
         color: #5F7278;
         width: auto;
         float: right;
         font-size: 85%;
         text-align: center;
         display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-box-flex: 1;
         display: -moz-box;
         		  -moz-box-orient: vertical;
         		  -moz-box-flex: 1;
         order: 3;
         position: absolute;
         }
 


#left-aside {
	display: -webkit-box;
             -webkit-box-orient: vertical;
             -webkit-box-flex: 1;
    display: -moz-box;
    		 -moz-box-orient: vertical;
    		 -moz-box-flex: 1;
    order: 1;
    max-width: 100%;
}
.box1  {
    width: auto;
    max-width: 800px;
    height: auto;
    padding: 16px;
    border-right: 1px solid #000;
    border-radius: 20px;
    box-shadow: 15px 15px 15px #000 inset;
    line-height: 20px;
    flex: 1;
    margin: 0px;
    }

.box2   {
    width: auto;
    max-width: 300px;
    float: left;
    margin-left: 40px;
    margin-bottom: 40px;
    padding: 14px;
    border-radius: 20px;
    box-shadow: 15px 15px 15px #000 inset;
    line-height: 25px;
    flex: 1;
}

.box3   {
    width: auto;
    max-width: 300px;
    float: right;
    margin-right: 40px;
    padding: 14px;
    border-radius: 20px;
    box-shadow: 15px 15px 15px #000 inset;
    line-height: 23px;
    flex: 1;
}

.box4 {
    width: auto;
    padding: 16px;
    padding-bottom: 1px;
    margin-left: 20px;
    margin-bottom: 10px;
    border-right: 1px solid #000;
    border-radius: 20px;
    box-shadow: 15px 15px 15px #000 inset;
    line-height: 22px;
    flex: 1;
    }

.box4 a {
    font-size: 1.2em;
}

.box5  {
    width: auto;
    margin-top: 20px;
    padding: 16px;
    margin-bottom: 10px;
    border-right: 1px solid #000;
    border-radius: 20px;
    box-shadow: 15px 15px 15px #000 inset;
    flex: 1;
    }
.box5 p {
    max-width: 500px;
    margin: 0 auto;
    line-height: 20px;
}
.box5 form {
    margin-top: 20px;
}
.box6  {
    width: auto;
    max-width: 660px;
    height: auto;
    padding: 16px;
    border-right: 1px solid #000;
    border-radius: 20px;
    box-shadow: 15px 15px 15px #000 inset;
    line-height: 20px;
    flex: 1;
    margin-left: 40px;
    clear: both;
    }

答案 1 :(得分：-1)

好吧，我以前将前一个答案标记为正确，虽然它有效，但它在div包含div的剩余使用上给出了100％的宽度并且没有完全响应，这留下了很多空白并且不是真正的跨浏览器支持。因此，为了将响应能力完全集中在包装器div中，我必须将以下代码行输入到父div中。

display: flex;
         justify-content: center;
         align-items: center;

这完全符合父母内部的所有内容，并具有完全的响应能力。

相关问题
最新问题