Question

我试图将这些盒子水平和垂直地放在屏幕中间。另一个问题是，当我缩放页面时，如何自动调整大小？

/*-------------------------
    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>

Answer 1

您可以使用容器上的绝对定位垂直和水平居中：

＆＃13;

/*-------------------------
    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;
}

＆＃13;

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

＆＃13;

Answer 2

要垂直对齐，您需要一个CSS中位置绝对的包装类。搜索垂直中心，它将获取大量结果。要调整大小框和屏幕大小调整大小 - 是响应式模板。我建议你使用Twitter Bootstrap来处理你的尺寸。

Answer 3

将您的.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%;
}

＆＃13;

/*-------------------------
    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;
}

＆＃13;

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

＆＃13;

Answer 4

您只需要为.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;添加到要垂直居中的元素。

Answer 5

首先是解释，然后是一些代码。

垂直居中是一个经典的CSS问题。最近，vh单位非常方便。加上保证金（也许是计算）它现在是一个可以解决的问题。

水平居中很简单，你已经明白了。只需要一个宽度并设置margin: 0 auto，你就可以了。

对于垂直居中，要记住的关键是你居中你的元素，所以一半在中间，一半在中间。有了这个，我们可以为你的margin: calc(50vh-40px) auto 0高元素和presto 80px，它在垂直中间。

更进一步：
与水平居中一样，您似乎已经使用%降低了动态宽度。对于动态垂直尺寸，我们可以再次转向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>

享受。

集中CSS框（Html和Css）

5 个答案: