元素沒有在div中集中對齊

我使用引導來建立一個基本上涉及「瓷磚」的網站。元素沒有在div中集中對齊

我使用percircle jQuery插件（https://github.com/toubou91/percircle）

但我似乎無法得到我的兩個進度條圈被定位在列的中心。我怎麼能這樣做？我試過'margin：auto'，但這似乎不起作用！

代碼如下。

感謝

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 

<script type="text/javascript" src="percircle-master/js/percircle.js"></script> 
<link rel="stylesheet" href="percircle-master/css/percircle.css"> 



<style> 
.tilebox{ 
border: 2px solid #ddd; 
} 

</style> 

</head> 

<body> 
<div class = "row"> <!-- Row for all of the tiles --> 
<div class = "col-md-3"> 
<div class = "tilebox"> <!-- Whole Tile --> 
<div class = "row"> <!-- Top Image Row --> 
<div class = "col-md-12"> <!-- Image --> 
<p style = "text-align: center;"> Image </p> <!-- Image --> 
</div> 
</div> <!-- End of Row 1 --> 

<div class="row"> 
<div class="col-md-6" style = "white-space: nowrap; overflow: scroll;"> 
<h4> Name </h4> 
</div> 
<div class="col-md-6 pull-right"> 
<h4 class = "text-muted"> Price </h4> 
</div> 
</div> <!-- End Row 2 --> 



<div class = "row"> 
<div class = "col-md-6"> 
<h5 class = "text-muted" style = "text-align: center;"> Your Share </h5> 
</div> 
<div class = "col-md-6"> 
<h5 class = "text-muted" style = "text-align: center;"> Availabile </h5> 
</div> 
</div> 

<div class = "row"> 
<div class = "col-md-6"> 
<div id="bluecircle" data-percent="0" class="small"> </div> 
</div> 

<div class = "col-md-6"> 
<div id="bluecircle" data-percent="100" class="small"> </div> 
</div> 
</div> 
</div> 
</div> 
</div> 

<script> 
$("[id$=circle]").percircle(); 
</script> 

</body> 

</html>

來源

2016-02-01 Andrew1996

你能製作一個小提琴嗎？ – domoarrigato

我試過但我正在使用一些本地的JS和CSS文件，我會如何將它們添加到小提琴中，因爲它們不是CDN？ – Andrew1996

只需將CSS框架和JS框架中的JS放在一起... – Aziz

首先，感謝您使用percircle :)。

如果我做了明確什麼是你的詞組的確切含義：位於列

中心那麼你也應該添加center類

。

對於你的情況，這可以用2種方法完成。

A）聲明一個附加center類對應於圓每個現有div：
<div id="bluecircle" data-percent="0" class="small center"> </div> 
<div id="bluecircle" data-percent="100" class="small center"> </div> 
B）一個center類添加到具有「圓」後綴的所有元素，使用jQuery：
$("[id$=circle]").addClass("center"); // this gets the job done 
$("[id$=circle]").percircle(); 
結果是一樣的，這兩種情況下：

有關進一步的參考，我personal website的「技能」部分是引導實現與percircle一起，在三列分割的面積，地三個中心的圓圈，每列一個很好的例子：

您可以找到上述實施here的源代碼。

來源

2016-02-13 09:51:36 thodorisbais

元素沒有在div中集中對齊

回答

相關問題