元素未在圆周中的 div 中居中对齐

Question

I'm using bootstrap to build a website that basically involves "tiles".我正在使用引导程序构建一个基本上涉及“瓷砖”的网站。

I'm using the percircle JQuery plugin ( https://github.com/toubou91/percircle )我正在使用 percircle JQuery 插件 ( https://github.com/toubou91/percircle )

But I can't seem to get my two progress circle bars to be positioned in the centre of the column.但是我似乎无法让我的两个进度圆条位于列的中心。 How could I do this?我怎么能这样做？ I've tried 'margin: auto' but that doesn't seem to work!我试过 'margin: auto' 但这似乎不起作用！

The code is below.代码如下。

Thanks谢谢

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

First of all, thanks for using percircle :).首先，感谢您使用percircle :)。

If I made clear what is the exact meaning of your phrase:如果我说清楚你这句话的确切含义是什么：

positioned in the centre of the column位于柱子的中心

Then you should also add the center class.然后你还应该添加center类。

For your case, this can be done with 2 ways.对于您的情况，这可以通过 2 种方式完成。

A) Declare an additional center class for every existing div that corresponds to a circle: A) 为每个与圆对应的现有div声明一个额外的center类：

<div id="bluecircle" data-percent="0" class="small center"> </div>
<div id="bluecircle" data-percent="100" class="small center"> </div>

B) Add a center class to all elements that have a "circle" suffix, using jQuery : B) 使用jQuery为所有具有“circle”后缀的元素添加center类：

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

Result is same, for both cases:结果相同，对于这两种情况：

For further reference, the "skills" section of my personal website is a good example of a bootstrap implementation together with percircle, that splits an area in three columns and places three centered circles, one for each column:为了进一步参考，我个人网站的“技能”部分是一个很好的引导实现示例，它与 percircle 一起使用，它将一个区域分成三列并放置三个居中的圆圈，每列一个：

You can find the source code for the above implementation here .您可以在此处找到上述实现的源代码。

元素未在圆周中的 div 中居中对齐

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-02-13 09:51:36

元素未在圆周中的 div 中居中对齐

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-02-13 09:51:36

解决方案1
1 已采纳 2016-02-13 09:51:36