logo标签列表

居中CSS盒子（HTML和CSS）

javascriptjqueryhtmlcss
5

我想把这些方框水平和垂直居中在屏幕中间。另一个问题是，当我缩放页面时，如何使它自动重新调整大小？

/*-------------------------
    Simple reset
--------------------------*/


*{
    margin:0;
    padding:0;
}


/*-------------------------
    General Styles
--------------------------*/


/*----------------------------
    Color Themes
-----------------------------*/
.nav-colors{
     position: relative;
      background: white;
      height: 200px;
      width: 60%;
      margin: 0 auto;
      padding: 20px;
      overflow: auto;
}

.home-link{
    background-color:#00c08b;
    width: 15%;
    height: 80px;
    display: inline-block;
    margin-left: 10%;
}
.portfolio-link{
    background-color:#ea5080;
    width: 15%;
    height: 80px;
    display: inline-block;

}
.social-link{
    background-color:#53bfe2;
    width: 15%;
    height: 80px;
    display: inline-block;

}
.contact-link{
    background-color:#f8c54d;
    width: 15%;
    height: 80px;
    display: inline-block;

}
.blog-link{
    background-color:#df6dc2;
    width: 15%;
    height: 80px;
    display: inline-block;

}


<!DOCTYPE html>
<html>
    <head>
        <title>Neiko Anglin | Front-End Develper </title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="css/styles.css" />

        <!-- Font Awesome Stylesheet -->
        <link rel="stylesheet" href="font-awesome/css/font-awesome.css" />


    </head>

    <body>
        <div class="nav-colors">
            <div class="home-link">
            </div>
            <div class="portfolio-link">
            </div>
            <div class="social-link">
            </div>
            <div class="contact-link">
            </div>
            <div class="blog-link">
            </div>

        </div>
    </body>
</html>
5个回答
1
你可以在容器上使用绝对定位来实现垂直和水平居中： 

/*-------------------------
    Simple reset
--------------------------*/
 * {
    margin:0;
    padding:0;
}
/*-------------------------
    General Styles
--------------------------*/

/*----------------------------
    Color Themes
-----------------------------*/
 .nav-colors {
    position: absolute;
    background: white;
    height: 84px;
    width: 60%;
    margin: auto;
    padding: 20px;
    overflow: auto;
    top:0;
    right:0;
    bottom:0;
    left:0;
}
.home-link {
    background-color:#00c08b;
    width: 15%;
    height: 80px;
    display: inline-block;
    margin-left: 10%;
}
.portfolio-link {
    background-color:#ea5080;
    width: 15%;
    height: 80px;
    display: inline-block;
}
.social-link {
    background-color:#53bfe2;
    width: 15%;
    height: 80px;
    display: inline-block;
}
.contact-link {
    background-color:#f8c54d;
    width: 15%;
    height: 80px;
    display: inline-block;
}
.blog-link {
    background-color:#df6dc2;
    width: 15%;
    height: 80px;
    display: inline-block;
}
<div class="nav-colors">
    <div class="home-link"></div>
    <div class="portfolio-link"></div>
    <div class="social-link"></div>
    <div class="contact-link"></div>
    <div class="blog-link"></div>
</div>

当绝对定位元素时，应该小心，因为它会将其从文档流中移除，从而允许父元素折叠 - 这可能会导致不良影响。 - Knight Yoshi
0

将您的.nav-color类更改为

.nav-colors{
     position: fixed;
      background: white;
      height: 80px;
      width:60%;
      margin: -60px 0 0 0;
      padding: 20px;
      overflow: auto;
      top:50%;
      left:20%;
}


/*-------------------------
    Simple reset
--------------------------*/

* {
  margin: 0;
  padding: 0;
}
/*-------------------------
    General Styles
--------------------------*/

/*----------------------------
    Color Themes
-----------------------------*/

.nav-colors {
  position: fixed;
  background: white;
  height: 80px;
  width: 60%;
  margin: -60px 0 0 0;
  padding: 20px;
  overflow: auto;
  top: 50%;
  left: 20%;
}
.home-link {
  background-color: #00c08b;
  width: 15%;
  height: 80px;
  display: inline-block;
  margin-left: 10%;
}
.portfolio-link {
  background-color: #ea5080;
  width: 15%;
  height: 80px;
  display: inline-block;
}
.social-link {
  background-color: #53bfe2;
  width: 15%;
  height: 80px;
  display: inline-block;
}
.contact-link {
  background-color: #f8c54d;
  width: 15%;
  height: 80px;
  display: inline-block;
}
.blog-link {
  background-color: #df6dc2;
  width: 15%;
  height: 80px;
  display: inline-block;
}
<div class="nav-colors">
  <div class="home-link">
  </div>
  <div class="portfolio-link">
  </div>
  <div class="social-link">
  </div>
  <div class="contact-link">
  </div>
  <div class="blog-link">
  </div>
</div>

0

你只需要为你的.nav-colors添加一些属性：

.nav-colors{
    position: relative;
    background: white;
    height: 200px;
    width: 60%;
    margin: 0 auto;
    padding: 20px;
    overflow: auto;

    line-height: 200px;
    text-align: center;
}

并且在你想要垂直居中的元素上添加 vertical-align: middle;。

0

先讲解一下，再放一些代码。

垂直居中是一个经典的 CSS 问题。最近，vh 单位非常方便地解决了这个问题。结合 margin（也许还有 calc），现在它是可以解决的。

水平居中已经足够简单了，你已经掌握了。只需设置一个宽度并设置 margin: 0 auto，就可以轻松搞定。

对于垂直居中来说，需要记住的关键是你正在将元素置于中心，所以一半在中间，一半在中间以下。有了这个想法，我们可以为您的 80px 高元素创建 margin: calc(50vh-40px) auto 0，瞬间就可以垂直居中了。

更进一步：
像水平居中一样，您似乎已经通过使用 % 实现了动态宽度。 对于动态垂直尺寸，我们可以再次转向 vh。好处是这样可以省去css calc 函数。只需从 50vh 边距中减去一半的高度，您就可以得到您的边距。因此，对于 height: 20vh，边距为 margin: 40vh auto 0

这里有一个JsFiddle

还有一些代码：

CSS：

        *{
            margin: 0;
            padding: 0;
        }
        html, body{
            width: 100vw;
            height: 100vh;
        }
        .nav-colors{
            width: 80%;
            height: 20vh;
            margin: calc(40vh) auto 0;
        }
        .nav-colors div{
            width: 18%;
            margin: 0 0 0 1%;
            height: 100%;
            display: inline-block;
        }
        .home-link{background-color:#00c08b;}
        .portfolio-link{background-color:#ea5080;}
        .social-link{background-color:#53bfe2;}
        .contact-link{background-color:#f8c54d;}
        .blog-link{background-color:#df6dc2;}

HTML：

<div class="nav-colors">
    <div class="home-link"></div>
    <div class="portfolio-link"></div>
    <div class="social-link"></div>
    <div class="contact-link"></div>
    <div class="blog-link"></div>
</div>

享受。

0
要垂直对齐，您需要在CSS中使用绝对定位的包装器类。搜索垂直居中，这将为您提供许多结果。 要随着屏幕调整大小调整框 - 这是响应式模板。我建议您使用Twitter Bootstrap，它会处理您的尺寸。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接