将div元素彼此相邻并居中

Question

I am trying to put 5 div elements next to each other and also center them. However, I cant make it work. Here is my code

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

I have 5 of them. They are basically the same, only the content is different. All 5 divs are inside container-fluid (I am using bootsrap). I have tried to add display:inline-block to my container but it doesn't work. Also, I used float:left but in that case, I can't properly align my divs when the screen size changes. I tried to use the extended version of Bootstrap grid when you can create equal 5 columns but in that case, my div's content gets messed up. Can anyone please give me some solution that will work for all screen sizes? Thanks

Answer 1

Try this in a larger screen, I think this will work. The snippet's screen is very small that's why it does not align together. Use Media Queries to adjust the div 's size so that it can accommodate smaller screen size

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

Answer 2

This may help you!

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