CSS How to make child object of a div appear in center?

Question

I am pretty much sure I am not doing the work of making child div properly. My buttons are appearing from right when it shall be at left of the div "button-holder" I want my buttons inside my button-holder start appear from left. Also button-holder shall be below the boxes.I don't want it to have margin to be below. Please help me.

.background{
                background-color:grey;
                height:100%;
            }
            .stopwatch-background{
                width:500px;
                height:300px;
                background-color:white;     
                position:relative;
                top:30%;
                left:30%;
                border-radius:40px;
                padding-top:45px;
                padding-left:50px;
                padding-right:40px;
            }
            .border{
                background-color:#B7A8A8;
                width:150px;
                height:200px;
                border-radius:10px;
                float:left;
            }
            .big-semicolon{
                float:left;
                font-size:300px;
                position:relative;
                top:-170px;
                margin-left:20px;
                margin-right:20px;
            }
            .boxes{
           
            }
            .button-holder{
                background-color:green;
                width:400px;
                height:40px;
                margin-top:207px;
                display:block;
            }
            .btn{
                margin-left:20px;
                margin-right:20px;
                float:left;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <div class="background">
        <div class="stopwatch-background">
            <div class="boxes">
                <div class="border"></div>
                <div class="big-semicolon">:</div>
                <div class="border"></div>
            </div>
            <div class="button-holder">
                <button class="btn btn-primary">Start</button>
                <button class="btn btn-primary">Start</button>
                <button class="btn btn-primary">Start</button>
            </div>
        </div>

https://stackoverflow.com/a/33049198/3597276 – Michael Benjamin Nov 20 '17 at 13:36 — Michael Benjamin, Nov 20 '17 at 13:36

mickaelw · Accepted Answer · 2017-11-20T13:51:36.687

I modify the button-holder and btn class:

.button-holder{
  background-color:green;
  width:400px;
  height:40px;
  display:flex;
}
.btn{
  margin-left:20px;
  margin-right:20px;
}

That's what you expected?

I re arrange a little your css too.

.background{
  background-color:grey;
  height:100%;
}
.stopwatch-background{
  width:500px;
  height:300px;
  background-color:white;     
  position:relative;
  left:30%;
  border-radius:40px;
  padding-top:45px;
  padding-left:50px;
  padding-right:40px;
}
.boxes{
  display: flex;
}
.border{
  background-color:#B7A8A8;
  width:150px;
  height:200px;
  border-radius:10px;
}
.big-semicolon{
  height: 200px;
  font-size:300px;
  line-height: 140px;
  margin-left:20px;
  margin-right:20px;
}
.button-holder{
  background-color:green;
  width:400px;
  height:40px;
  display:flex;
}
.btn{
  margin-left:20px;
  margin-right:20px;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">   </script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <div class="background">
    <div class="stopwatch-background">
        <div class="boxes">
            <div class="border"></div>
            <div class="big-semicolon">:</div>
            <div class="border"></div>
        </div>
        <div class="button-holder">
            <button class="btn btn-primary">Start</button>
            <button class="btn btn-primary">Start</button>
            <button class="btn btn-primary">Start</button>
        </div>
    </div>
  </div>

CSS How to make child object of a div appear in center?

1 Answers1