Question

我知道使用保证金：0自动将使div居中。但在我的情况下它不工作。我无法弄清楚我的问题。如果有人可以指导我朝着正确的方向前进，那将非常有帮助。

下面是html

我希望circle div和image标签始终位于线段的中心。它位于水平中心但不垂直位于线段顶部。

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

以下是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;
}

Answer 1

将display:flex和section中的margin:auto添加到要在中心显示的子div（即水平和垂直）。

检查以下代码段

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

Answer 2

＆＃13;

if i in files: files.remove(i)

＆＃13;

.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;
}

＆＃13;

这与您正在寻找的相同吗？

这是JSFIDDLE

希望这有帮助。

Answer 3

您可以使用以下代码

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

See the example

以html div为中心

3 个答案: