Question

我使用bootstrap构建一个基本上涉及＆＃34; tiles＆＃34;的网站。

我正在使用percircle JQuery插件（https://github.com/toubou91/percircle）

但我似乎无法让我的两个进度圆棒位于列的中心。我怎么能这样做？我已尝试过保证金：自动＆＃39;但这似乎不起作用！

代码如下。

谢谢

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

Answer 1

首先，感谢您使用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）为所有具有＆＃34;圈＆＃34;的元素添加center类。后缀，使用jQuery：

$("[id$=circle]").addClass("center"); // this gets the job done
$("[id$=circle]").percircle();

对于这两种情况，结果都是一样的：

进一步参考，＆＃34;技能＆＃34;我的personal website部分是一个很好的示例，它与percircle一起实现了一个bootstrap实现，它将一个区域分成三列并放置三个居中的圆圈，每列一个：

您可以找到上述实施的源代码here。

元素不在div中心对齐

1 个答案: