Question

我正在构建一个scorecard，我将在屏幕中间的一个圆圈内绘制整体得分，而详细信息将显示在下一行。

我正在使用引导程序3 ，这是下面的代码

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <title>Utora Scorecard</title>
    <style>
        .circle {
          height: 150px;
          width: 150px;
          display: table-cell;
          text-align: center;
          vertical-align: middle;
          border-radius: 50%;
          font-weight: 10px;
          border-width: 3px;
          border-style: solid;
          border-color: red;
          font-size: 30px;
          margin-left: 200%;
    }
    </style>

  </head>

  <body>
    <div class="container">
        <div class="circle">
            57
        </div>

        <div class="row">
            <div class='col-lg-2 col-sm-3'>
             <!-- details of the score card will go in each of the columns -->
            </div>

            <div class="col-lg-2 col-sm-3"> 
            </div>

            <div class="col-lg-2 col-sm-3"> 
            </div>

            <div class="col-lg-2 col-sm-3"> 
            </div>

            <div class="col-lg-2 col-sm-3"> 
            </div>

        </div>

    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   </body>

</html>

这是它在浏览器中的外观

现在我希望这个圆圈在屏幕中间，但无法执行。

我尝试在text-center上使用center-block，margin-left，div等，但是没有任何效果。我如何才能使圆心居中，以便即使浏览器大小发生变化，圆仍保持在中心？

Answer 1

使用flexbox。在容器内创建一个div，然后为其指定css属性：display: flex; align-items: center; justify-content: center;。现在，移动所有要在此div中居中的元素。

Answer 2

在容器中添加一个新类，将其命名为“ center-content”：

.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

或者，如果您只想将圆水平居中，则将其添加到

margin: auto;

无法使用引导程序将div居中放置在容器中

2 个答案: