Fatal编程技术网
  • css/
  • Css 将html分区居中

Css 将html分区居中

css html twitter-bootstrap

Css 将html分区居中,css,html,twitter-bootstrap,Css,Html,Twitter Bootstrap,我知道使用边距：0自动将使div居中。 但在我的情况下，它不起作用。我也无法解决我的问题。 如果有人能把我引向正确的方向，那将非常有帮助 下面是html 我希望圆div和图像标记始终位于段的中心。它水平位于中心，但不垂直位于段的顶部 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible

我知道使用边距：0自动将使div居中。 但在我的情况下，它不起作用。我也无法解决我的问题。 如果有人能把我引向正确的方向，那将非常有帮助

下面是html

我希望圆div和图像标记始终位于段的中心。它水平位于中心，但不垂直位于段的顶部

<!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>
您可以使用以下代码

section > div {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
您可以使用以下代码

section > div {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
将
部分中的
显示：flex
和
边距：auto
添加到要在中心显示的子div中（即水平和垂直）

检查下面的代码片段



菜单{
背景色：白色；
}
menuButton先生{
颜色：黑色！重要；
宽度：25%；
文本对齐：居中；
字体大小：14px；
}
.内容{
边缘顶部：50px；
}
.标题{
颜色：白色；
}
circletag先生{
显示：块；
宽度：100px；
高度：100px；
背景：#E6E7ED；
-moz边界半径：50px；
-webkit边界半径：50px；
文本对齐：居中；
保证金：0自动；
}
.circletag img{
边缘顶部：7px；
宽度：100px；
}



Shruti Nair：自由职业者
灌木奈尔
混合移动应用开发者

将
部分中的
显示：flex
和
边距：auto
添加到要在中心显示的子div中（即水平和垂直）

检查下面的代码片段



菜单{
背景色：白色；
}
menuButton先生{
颜色：黑色！重要；
宽度：25%；
文本对齐：居中；
字体大小：14px；
}
.内容{
边缘顶部：50px；
}
.标题{
颜色：白色；
}
circletag先生{
显示：块；
宽度：100px；
高度：100px；
背景：#E6E7ED；
-moz边界半径：50px；
-webkit边界半径：50px；
文本对齐：居中；
保证金：0自动；
}
.circletag img{
边缘顶部：7px；
宽度：100px；
}



Shruti Nair：自由职业者
灌木奈尔
混合移动应用开发者



菜单{
背景色：白色；
}
menuButton先生{
颜色：黑色！重要；
宽度：25%；
文本对齐：居中；
字体大小：14px；
}
.内容{
//边缘顶部：50px；
}
.标题{
颜色：白色；
}
circletag先生{
显示：块；
宽度：100px；
高度：100px；
背景：#E6E7ED；
-moz边界半径：50px；
-webkit边界半径：50px；
文本对齐：居中；
保证金：0自动；
}
.circletag img{
边缘顶部：7px；
宽度：100px；
}
部分{
背景色：#90ECF2；最小高度：500px；
显示器：flex；
显示：-ms flexbox；
显示：-webkit flex；
对齐项目：居中；对齐内容：居中；
文本对齐：居中；
}



灌木奈尔
混合移动应用开发者



菜单{
背景色：白色；
}
menuButton先生{
颜色：黑色！重要；
宽度：25%；
文本对齐：居中；
字体大小：14px；
}
.内容{
//边缘顶部：50px；
}
.标题{
颜色：白色；
}
circletag先生{
显示：块；
宽度：100px；
高度：100px；
背景：#E6E7ED；
-moz边界半径：50px；
-webkit边界半径：50px；
文本对齐：居中；
保证金：0自动；
}
.circletag img{
边缘顶部：7px；
宽度：100px；
}
部分{
背景色：#90ECF2；最小高度：500px；
显示器：flex；
显示：-ms flexbox；
显示：-webkit flex；
对齐项目：居中；对齐内容：居中；
文本对齐：居中；
}



灌木奈尔
混合移动应用开发者