我正在使用引导程序来建立一个基本上涉及“平铺”的网站。
我正在使用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>
最佳答案
首先，感谢您使用percircle :)。
如果我说清楚您的话的确切意思是：
位于列的中心
然后，您还应该添加center类。
对于您的情况，这可以通过两种方法完成。
A）为每个对应于一个圆的现有center声明一个附加的div类：
<div id="bluecircle" data-percent="0" class="small center"> </div>
<div id="bluecircle" data-percent="100" class="small center"> </div>
B）使用jQuery将
center类添加到所有带有“圆”后缀的元素：$("[id$=circle]").addClass("center"); // this gets the job done
$("[id$=circle]").percircle();
对于两种情况，结果是相同的：
作为进一步的参考，我的personal website的“技能”部分是引导实现与percircle一起的一个很好的例子，该过程将区域分成三列，并放置三个居中的圆，每列一个圆：
您可以找到上述实现here的源代码。