将 div 元素并排放置并居中答案

【问题标题】：Put div elements next to each other and center them将 div 元素并排放置并居中
【发布时间】：2017-07-28 14:11:28
【问题描述】：

我试图将 5 个 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 个。它们基本相同，只是内容不同。所有 5 个 div 都在 container-fluid 内（我正在使用 bootsrap）。我试图将 display:inline-block 添加到我的容器中，但它不起作用。另外，我使用了 float:left 但在这种情况下，当屏幕尺寸发生变化时，我无法正确对齐 div。当您可以创建相等的 5 列时，我尝试使用 Bootstrap 网格的扩展版本，但在这种情况下，我的 div 的内容会变得混乱。谁能给我一些适用于所有屏幕尺寸的解决方案？谢谢

【问题讨论】：

我在提供的标记中看不到 5 个兄弟 div。请提供完整的html
@RahulB 我试图添加完整的代码，但由于某种原因系统呈现了其中的一部分。它基本上是包含 5 个这些 div 块的容器。

标签： html css twitter-bootstrap alignment

【解决方案1】：

在更大的屏幕上试试这个，我认为这会奏效。 sn-p 的屏幕非常小，这就是它无法对齐的原因。使用媒体查询调整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>

【讨论】：

【解决方案2】：

这可能对你有帮助！

.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>

【讨论】：