-3

I am building a scorecard where I will have overall score depicted inside a circle in the middle of a screen while the details would be in the next row.

I am using bootstrap 3 and here is my code below

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

Here is how it looks in the browser

enter image description here

Now I want this circle to be in middle of the screen but unable to do it.

I tried using text-center, center-block, margin-left etc on the div but nothing worked. How can I center the circle such that even though the browser size changes, it remains in the center?

Souvik Ray
  • 2,899
  • 5
  • 38
  • 70

2 Answers2

1

Use flexbox for it. Create a div inside the container and then give it css properties : display: flex; align-items: center; justify-content: center;. Now move all your elements which you want to center in this div.

Rehan Sattar
  • 3,497
  • 4
  • 13
  • 21
1

Add to the container a new class, call it something like "center-content":

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

Or if you only want to center the circle horizontally add to it 

margin: auto;
Liron Navon
  • 1,068
  • 1
  • 11
  • 22