Question

我是编码的新手，我已经设法弄清楚了一些事情，但这个问题让我深感不安，因为我似乎无法找到解决方案。

我有一个横向＆amp;页面上垂直居中的div。我想在它上面放一个标题，而不是偏离主div。

现在看起来如何（两者都集中在一起）： both are centered as a whole.

我希望它看起来如何（黄色居中，顶部是蓝色标题）： yellow is centered, blue header on top.

.. 基本代码：

＆＃13;

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.header {
  width: 1000px;
  height: 100px;
  background-color: blue;
  margin-left: auto;
  margin-right: auto;
}
.main {
  width: 1000px;
  height: 500px;
  background-color: yellow;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<div class="outer">
  <div class="middle">
    <div class="header"></div>
    <div class="main">
    </div>
  </div>
</div>

＆＃13;

Answer 1

这很可能不是最佳答案，但这只是一个开始。实际上，我使用this method将容器集中在一起。然后我将-50px添加到容器的顶部属性（标题高度的一半），向上移动容器50px，使内容div再次完全居中。此解决方案应适用于大多数较新的浏览器，但有一些＆＃34;限制＆＃34; more here

HTML

<div class="centered-container">
    <div class="header">
        header stuff
    </div>
    <div class="content">
        Content stuff here.
  </div>
</div>

CSS

body {
  background: #600;
}

.centered-container {
  position: absolute;
  left: 50%;
  top: 50%;
  top: calc(50% - 50px);
  transform: translate(-50%, -50%);
  width: 600px;
  background: red;
  color: white;
  text-align: center;
}

.header {
    height:100px;
    background:blue;
}

.content {
    height:300px;
    background:teal;
}

小提琴here。

我将内容宽600像素，高300像素，标题高100px，因此更容易看到。负边际

Answer 2

<!DOCTYPE html>
<html>
<!-- Handles the init code(javascript,css,links) and style references -->
<!-- Also, use body and head tags (THEY ARE IMPORTANT) -->
<head>
    <style>
        /** Web browsers load whatever is in the <head> tag FIRST
        */

        .outer {
          display: table;
          position: absolute;
          height: 100%;
          width: 100%;
        }

        .middle {
          display: table-cell;
          vertical-align: middle;
        }

        /* You can use "margin: 0 auto;" to center this object.
        * No need for left and right margin centering.
        *
        * Also, set the position to be relative then try adding your heading object
        */
        .header {
          width: 1000px;
          height: 100px;
          background-color: blue;
          margin: 0 auto;
          position: relative;
        }

        /* You don't need the margin to be 0 auto on both right and left
        * if you have the width 100%
        */

        .main {
          width: 100%;
          height: 500px;
          background-color: yellow;
          margin: 0;
        }

    </style>
</head>

<!-- Everything In Body Tag is style elements or skeletal HTML (div's, span's, format)-->
<!-- Place the heading OUTSIDE of the header element (in the outer div) this shouldn't alter the position of the 
header. -->
<body>
    <div class="outer">
      <div class="middle">
        <div class="header"></div>
        <div class="main">
        </div>
      </div>
    </div>
</body>

如何在中心div的顶部放置标题？（HTML / CSS）

2 个答案:

如何在中心div的顶部放置标题？ （HTML / CSS）

2 个答案:

如何在中心div的顶部放置标题？（HTML / CSS）