Question

我遇到了一些问题，试图让这个div居中并让它与HTML中的其他项重叠，它现在只是非常混乱，如果你能提供帮助就会很棒，谢谢。

这是CSS：

#gameoverbox {
  border: 7px solid green;
  position: absolute;
  background-color: yellow;
  height: 210px;
  position: relative;
  margin-top: -70px;
}
a:hover {
  color: blue;
}
a:active {
  color: green;
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
#thebuttonovergame {
  text-align: center;
  position: absolute;
  display: block;
  font-weight: bold;
  background-color: #98bf21;
  width: 100px;
  padding: 1px;
  border: 3px solid green;
}

这是HTML：

<center>
  <div id="gameoverbox">

    <h1>GAME OVER</h1>
    <h1>GREAT SCORE!</h1>
    <br>

    <center>
      <div id="thebuttonovergame">

        <a href="#" id="tryagainbutton">
          <h1>PLAY</h1>
        </a>

        <br>

        <a href="#" id="backhomebutton">
          <h1>HOME PAGE</h1>
        </a>

      </div>
    </center>

Answer 1

无论页面上的其他元素如何，这些更改都会将thebuttonovergame div移动到中心。

请参阅此fiddle

#thebuttonovergame {
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  display: block;
  font-weight: bold;
  background-color: #98bf21;
  width: 100px;
  padding: 1px;
  border: 3px solid green;
}

Answer 2

非常简单地回答你的问题：

1）要居中，您需要将某种边距应用于您想要居中的对象。 7.2.3代码is not HTML5 supported，所以我建议省略它

2）要浏览其他元素，您需要在对象上定义一些z索引，这通常意味着至少在它们上定义相对位置。

我拿了你的示例代码并提供了一个jsfiddle，我认为你正在尝试做什么： http://jsfiddle.net/0tdgnapn/

注意：我使用了否定<center>属性来移动margin-top代码上的内容，但您可以使用其他定位属性。

祝你好运

Answer 3

不要使用中心标签;只需使用CSS代替。我会像这样编写butttonovergame div的样式：

#thebuttonovergame: {
  width: 100px;
  padding: 1px;
  border: 3px solid green;
  margin: 0 auto;
  background: #98BF21;
  text-align: center;
  font-weight: bold;
}

设置像中心块元素一样的边距，div已经是。

Answer 4

我不明白你究竟想要什么，但试着用这个案例来告诉我是否适合你

1 - 使用转换

对div进行居中

＆＃13;

Select a.type_id, isnull(sum(b.duration), 0)
From tblType a Left Outer Join tblRequest b 
ON a.type_id = b.type_id and b.user_id = 1002
Group by a.type_id

＆＃13;

#gameoverbox {
  border: 7px solid green;
  position: absolute;
  background-color: yellow;
  height: 210px;
  position: relative;    
}
a:hover {
  color: blue;
}
a:active {
  color: green;
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
#thebuttonovergame {
  text-align: center;
  display: inline-block;
  font-weight: bold;
  background-color: #98bf21;
  width: 100px;
  padding: 1px;
  border: 3px solid green;
}

＆＃13;

2 - 将<center> <div id="gameoverbox"> <h1>GAME OVER</h1> <h1>GREAT SCORE!</h1> <br> <center> <div id="thebuttonovergame"> <a href="#" id="tryagainbutton"> <h1>PLAY</h1> </a> <br> <a href="#" id="backhomebutton"> <h1>HOME PAGE</h1> </a> </div> </center>移除gameoverbox内的div居中并添加position: absolute

＆＃13;

display: inline-block

＆＃13;

#gameoverbox {
  border: 7px solid green;
  position: absolute;
  background-color: yellow;
  position: relative;    
}
a:hover {
  color: blue;
}
a:active {
  color: green;
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
#thebuttonovergame {
  text-align: center;
  display: inline-block;
  font-weight: bold;
  background-color: #98bf21;
  width: 100px;
  padding: 1px;
  border: 3px solid green;
}

＆＃13;

如何获得Div居中并让它重叠HTML中的其他项目

4 个答案: