把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元素放在一起並居中

回答

相關問題