CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Shruti Nair
Shruti Nair

Reputation: 2034

Center a html div

I know using margin:0 auto will center the div. But in my case its not working.And i'm not able to figure out my issue. If somebody could guide me in the right direction it will be very helpful.

Below is the html

I want the circle div and image tag to be in the center of the segment always.it is in center horizontally but not vertically its stays at the top of the segment.

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Shruti Nair:Freelancers</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav class="navbar navbar-default navbar-fixed-top menu">
      <div class="container menu">
           <a class="navbar-brand menuButton" href="#">ABOUT</a>
           <a class="navbar-brand menuButton" href="#">SKILLS</a>
           <a class="navbar-brand menuButton" href="#">PORTFOLIO</a>
           <a class="navbar-brand menuButton" href="#">EXPERIENCE</a>
      </div>
    </nav>
    <div class="content-box content">

         <section style="background-color:#90ECF2;min-height:500px;margin:0 auto;text-align:center;">
          <div>

                 <div class="circletag" id="nay">
                    <img src="img/defaultAvatars.png">
                 </div>

                  <h1 class="heading">SHRUTI NAIR</h1>
                  <span>Hybrid Mobile App developer</span>
            </div>
         </section>
    </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Below is the css

.menu{
    background-color: white;

}
.menuButton{
    color: black !important;
    width: 25%;
    text-align: center;
    font-size:14px;

}
.content{
    margin-top:50px;
}

.heading{
    color:white;
}

.circletag {
    display: block;
    width: 100px;
    height: 100px;
    background: #E6E7ED;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;    
    text-align:center;
    margin: 0 auto;
}

.circletag img{
    margin-top:7px;
    width:100px;
}

Upvotes: 1

Views: 95

Answers (3)

Bhuwan
Bhuwan

Reputation: 16855

add display:flex in the section and margin:auto to the child div which you want to show at the center(i.e. horizontally and vertically).

Check below snippet

.menu {
  background-color: white;
}

.menuButton {
  color: black !important;
  width: 25%;
  text-align: center;
  font-size: 14px;
}

.content {
  margin-top: 50px;
}

.heading {
  color: white;
}

.circletag {
  display: block;
  width: 100px;
  height: 100px;
  background: #E6E7ED;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  text-align: center;
  margin: 0 auto;
}

.circletag img {
  margin-top: 7px;
  width: 100px;
}
<!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">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Shruti Nair:Freelancers</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top menu">
    <div class="container menu">
      <a class="navbar-brand menuButton" href="#">ABOUT</a>
      <a class="navbar-brand menuButton" href="#">SKILLS</a>
      <a class="navbar-brand menuButton" href="#">PORTFOLIO</a>
      <a class="navbar-brand menuButton" href="#">EXPERIENCE</a>
    </div>
  </nav>
  <div class="content-box content">

    <section style="background-color:#90ECF2;min-height:500px;margin:0 auto;text-align:center;display:flex;">
      <div style="margin:auto">

        <div class="circletag" id="nay">
          <img src="img/defaultAvatars.png">
        </div>

        <h1 class="heading">SHRUTI NAIR</h1>
        <span>Hybrid Mobile App developer</span>
      </div>
    </section>
  </div>


  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>
</body>

</html>

Upvotes: 2

Bhavin Shah
Bhavin Shah

Reputation: 2482

.menu{
    background-color: white;

}
.menuButton{
    color: black !important;
    width: 25%;
    text-align: center;
    font-size:14px;

}
.content{
   // margin-top:50px;
}

.heading{
    color:white;
}

.circletag {
    display: block;
    width: 100px;
    height: 100px;
    background: #E6E7ED;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;    
    text-align:center;
    margin: 0 auto;
}

.circletag img{
    margin-top:7px;
    width:100px;
}

section{
  background-color:#90ECF2;min-height:500px;
  display:flex;
  display:-ms-flexbox; 
  display:-webkit-flex; 
  align-items:center;justify-content:center;
  text-align:center;
}
<nav class="navbar navbar-default navbar-fixed-top menu">
      <div class="container menu">
           <a class="navbar-brand menuButton" href="#">ABOUT</a>
           <a class="navbar-brand menuButton" href="#">SKILLS</a>
           <a class="navbar-brand menuButton" href="#">PORTFOLIO</a>
           <a class="navbar-brand menuButton" href="#">EXPERIENCE</a>
      </div>
    </nav>
    <div class="content-box content">

         <section >
          <div>

                 <div class="circletag" id="nay">
                    <img src="img/defaultAvatars.png">
                 </div>

                  <h1 class="heading">SHRUTI NAIR</h1>
                  <span>Hybrid Mobile App developer</span>
            </div>
         </section>
    </div>

Is this the same that you are looking for?

Here is JSFIDDLE

Hope this helps.

Upvotes: 2

Gabriel Bica
Gabriel Bica

Reputation: 121

You can use the following code

section > div {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

See the example

Upvotes: 1

Related Questions