2并排divs居中？ [英] 2 side by side divs centered?

问题描述

那么我有2个div，我想并排排列在页面中心？

HTML：

 < div id =box> ;< / DIV> 
< div id =box>< / div> 
  

CSS：

  #box 
 {
 width：450px; 
 color：#ffffff; 
 height：500px; 
 text-align：center; 
 padding-top：15px; 
 -webkit-box-shadow：0px 0px 8px 0px＃000000; 
 -moz-box-shadow：0px 0px 8px 0px＃000000; 
 box-shadow：0px 0px 8px 0px＃000000; 
背景颜色：＃666; 
 border-radius：15px; 
 float：left; 
 margin-right：15px;} 
  

这就是现在的样子：

（我不能发布照片，因为我没有10代表抱歉！），但我希望他们下，并与导航栏对齐。谢谢。

解决方案

创建一个像

这样的div的包装器

 < div id =wrapper> 
< div class =box>< / div> 
< div class =box>< / div> 
< / div> 
  

然后用css

  #wrapper {
 text-align：center; 
宽度：??; //添加你的
高度：??; //添加您的
} 
  

仅供参考： <$ c


$ b $ p $ code> .box {
width：450px;
color：#ffffff;
height：500px;
display：inline-block;
-webkit-box-shadow：0px 0px 8px 0px＃000000;
-moz-box-shadow：0px 0px 8px 0px＃000000;
box-shadow：0px 0px 8px 0px＃000000;
背景颜色：＃666;
border-radius：15px;
}

#wrapper {
text-align：center;
}

JSFiddle

Well i have 2 divs that i want to be side by side and aligned in the center of the page?

HTML:

<div id="box"></div>
<div id="box"></div>

CSS:

#box
{
width: 450px;
color: #ffffff;
height: 500px;
text-align: center;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color:#666;
border-radius:15px;
float:left;
margin-right:15px;}

This is what it looks like right now:

(I cant post photo's because i dont have 10 rep sorry!) but i want them to be under and aligned to the nav bar. Thank you.

解决方案

Create a wrapper around those div like

<div id="wrapper">
  <div class="box"></div>
  <div class="box"></div>
</div>

Then with css

#wrapper {
     text-align: center;
     width: ??; //add yours
     height: ??; //add yours
}

FYI: id should be unique

Updates:

.box {
    width: 450px;
    color: #ffffff;
    height: 500px;
    display: inline-block;    
    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;
    background-color:#666;
    border-radius:15px;    
}

#wrapper{
    text-align: center;
}

JSFiddle

这篇关于2并排divs居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！