把div元素放在一起并居中

我想把5个div元素放在一起并且居中。但是，我不能让它工作。这里是我的代码把div元素放在一起并居中

<div style="width:200px;margin-right:20px;"> 
    <div class="panel panel-default text-center" style="border: 1px solid #fab05d;border-radius:0px;"> 
    <div class="panel-heading" style="background-color:#fab05d;color:#ffffff !important;border-radius:0px;"> 
     <h1>2017</h1> 
     <p style="line-height: 14pt; margin-top:3px;margin-right:25px;">EARLY BIRD*</p> 
     <p style="clear:both;line-height: 16pt;">GOLD PACKAGE <br>REGISTRATION**</p> 
    </div> 
    <div class="panel-body" style="padding-top:5px;"> 
     <p style="color:#929393;font-size:15px;"><strong>$x.00 TICKET</strong></p> 

     <div style="display:inline-block;margin:auto;padding-top:1px;margin-top:1px;" class="text-center"> 
     <input type="image" src="http://localhost/wordpress/wp-content/uploads/2017/03/gold_remove.png" id="gold_r" style=""> 
     <input type="text" class="text-center" id='goldval' name="quantity" size="5" onchange="gold_change()" style="vertical-align:top;font-weight:bold;border-radius:5px;border:1px solid #929393;"> 
     <input type="image" src="http://localhost" id="gold_a" style=""> 

     </div> 
    </div> 
    </div>

我有他们的。它们基本相同，只是内容不同。所有5个divs都在容器液（我正在使用bootsrap）。我试图添加display：inline-block到我的容器，但它不起作用。另外，我使用了float：left但在这种情况下，当屏幕大小发生变化时，我无法正确对齐div。我试图使用Bootstrap网格的扩展版本，当你可以创建相等的5列时，但在这种情况下，我的div的内容会变得混乱。任何人都可以请给我一些适用于所有屏幕尺寸的解决方案吗？谢谢

来源

2017-03-08 Aram Sheroyan

我看不到在所提供的标记5兄弟格。请提供完整的html – RahulB

@RahulB我试图添加完整的代码，但由于某种原因系统渲染了它的一部分。它基本上是包含5个div块的容器。 –

在更大的屏幕上试试这个，我认为这会奏效。片段的屏幕非常小，这就是为什么它不一起排列。使用媒体查询调整div的大小，使其能够容纳较小的屏幕尺寸

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div style="width:200px;height:250px;margin-right:20px; border: 1px solid red;" class="col-xs-2"> 
 
    </div> 
 
    <div style="width:200px;height:250px;margin-right:20px; border: 1px solid red;" class="col-xs-2"> 
 
    </div> 
 
    <div style="width:200px;height:250px;margin-right:20px; border: 1px solid red;" class="col-xs-2"> 
 
    </div> 
 
    <div style="width:200px;height:250px;margin-right:20px; border: 1px solid red;" class="col-xs-2"> 
 
    </div> 
 
    <div style="width:200px;height:250px;margin-right:20px; border: 1px solid red;" class="col-xs-2"> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-03-08 06:15:42 Swellar

这可能会帮助你！

.col-xs-2{ 
 
    background:green; 
 
    color:#FFF; 
 
} 
 
.col-half-offset{ 
 
    margin-left:4.166666667% 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row" style="border: 1px solid black"> 
 
     <div class="col-xs-2" id="p1">One</div> 
 
     <div class="col-xs-2 col-half-offset" id="p2">Two</div> 
 
     <div class="col-xs-2 col-half-offset" id="p3">Three</div> 
 
     <div class="col-xs-2 col-half-offset" id="p4">Four</div> 
 
     <div class="col-xs-2 col-half-offset" id="p5">Five</div> 
 
     <div>lorem</div> 
 
    </div> 
 
</div>

来源

2017-03-08 06:23:14

把div元素放在一起并居中

回答

相关问题