Question

我试图将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。我试图使用Bootstrap网格的扩展版本，当你可以创建相等的5列，但在这种情况下，我的div的内容搞砸了。任何人都可以给我一些适用于所有屏幕尺寸的解决方案吗？感谢

Answer 1

在更大的屏幕上试试这个，我认为这样可行。该片段的屏幕非常小，这就是为什么它不能对齐的原因。使用媒体查询调整div的大小，以便它可以容纳更小的屏幕尺寸

＆＃13;

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

＆＃13;

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

将div元素放在一起并将它们居中

2 个答案: