为什么边距：自动标签在"title" div上不起作用？

以下是我的网页的以下html和CSS代码。我似乎无法将标题div 内的标题div 居中。我很困惑这个问题是由于定位还是显示。谢谢。

#header {
  position: absolute;
  position: block;
  width: 100%;
  height: 120px;
  background-color: #3e8dff;
  text-decoration: underline;
  top: 0px;
  left: 0px;
}
#image {
  height: 120px;
  width: 150px;
  float: left;
}
#image a img {
  position: absolute;
  height: 120px;
  width: 150px;
}
#navBar {
  position: absolute;
  width: 1500px;
  height: 60px;
  background-color: #96CDCD;
  top: 120px;
  left: -15px;
}
#navBar ul li {
  position: relative;
  list-style-type: none;
  float: left;
  display: inline-block;
  border: 2px solid black;
  padding: 5px;
  margin-right: 50px;
  margin-left: 50px;
  font-family: Arial;
  font-size: 1.5em;
  bottom: 5px;
  background-color: blue;
}
#top_left {
  float: left;
  position: absolute;
  top: 190px;
  left: 0px;
  width: 48%;
  height: 500px;
  border-radius: 5px;
  background-color: #00FA9A;
}
#top_right {
  float: right;
  position: absolute;
  top: 190px;
  width: 50%;
  right: 0px;
  height: 500px;
  border-radius: 5px;
  background-color: #40E0D0;
  opacity: .7;
}
#bot_left {
  position: absolute;
  clear: both;
  height: 500px;
  width: 48%;
  border-radius: 5px;
  background-color: yellow;
  top: 700px;
  left: 0px;
}
#bot_right {
  position: absolute;
  float: right;
  height: 500px;
  width: 50%;
  border-radius: 5px;
  background-color: purple;
  top: 700px;
  right: 0px;
}
.simplePar {
  display: inline-block;
  font-size: 26px;
  font-family: Tahoma;
}
#title {
  position: absolute;
  display: inline-block;
  margin: auto;
  height: 90px;
  width: 500px;
  background-color: purple;
}

<!Doctype html>
<html>
<head>
  <title>Page 1</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="header">
    <div id="image">
      <a href="http://google.com/">
        <img src="C:UsersRaiyanDesktopfiles for websitegoogle-logo.jpg">
      </a>
    </div>
    <div id="title">
      pasa
    </div>
  </div>
  <div id="navBar">
    <ul>
      <li>Home</li>
      <li>Latest News</li>
      <li>Buy Tickets</li>
      <li>Blog</li>
      <li>More Info</li>
      <li>Contact us</li>
    </ul>
  </div>
  <div id="top_left">
    <p class="simplePar">All of these are under the <span>divs</span>
    </p>
  </div>
  <div id="top_right">
    <p class="simplePar">All of these are under the <span>divs</span>
    </p>
  </div>
  <div id="bot_left">
    <p class="simplePar">All of these are under the <span>divs</span>
    </p>
  </div>
  <div id="bot_right">
    <p class="simplePar">All of these are under the <span>divs</span>
    </p>
  </div>
  <div id="footer"></div>
</body>
</html>

将 #title 设置为内联，然后为其提供居中的文本对齐方式：

#header {
  position: absolute;
  position: block;
  width: 100%;
  height: 120px;
  background-color: #3e8dff;
  text-decoration: underline;
  top: 0px;
  left: 0px;
}
#image {
  height: 120px;
  width: 150px;
  float: left;
}
#image a img {
  position: absolute;
  height: 120px;
  width: 150px;
}
#navBar {
  position: absolute;
  width: 1500px;
  height: 60px;
  background-color: #96CDCD;
  top: 120px;
  left: -15px;
}
#navBar ul li {
  position: relative;
  list-style-type: none;
  float: left;
  display: inline-block;
  border: 2px solid black;
  padding: 5px;
  margin-right: 50px;
  margin-left: 50px;
  font-family: Arial;
  font-size: 1.5em;
  bottom: 5px;
  background-color: blue;
}
#top_left {
  float: left;
  position: absolute;
  top: 190px;
  left: 0px;
  width: 48%;
  height: 500px;
  border-radius: 5px;
  background-color: #00FA9A;
}
#top_right {
  float: right;
  position: absolute;
  top: 190px;
  width: 50%;
  right: 0px;
  height: 500px;
  border-radius: 5px;
  background-color: #40E0D0;
  opacity: .7;
}
#bot_left {
  position: absolute;
  clear: both;
  height: 500px;
  width: 48%;
  border-radius: 5px;
  background-color: yellow;
  top: 700px;
  left: 0px;
}
#bot_right {
  position: absolute;
  float: right;
  height: 500px;
  width: 50%;
  border-radius: 5px;
  background-color: purple;
  top: 700px;
  right: 0px;
}
.simplePar {
  display: inline-block;
  font-size: 26px;
  font-family: Tahoma;
}
#title {
  position: absolute;
  display: inline;
  text-align:center;
  margin: auto;
  height: 90px;
  width: 500px;
  background-color: purple;
}

<!Doctype html>
<html>
<head>
  <title>Page 1</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="header">
    <div id="image">
      <a href="http://google.com/">
        <img src="C:UsersRaiyanDesktopfiles for websitegoogle-logo.jpg">
      </a>
    </div>
    <div id="title">
      pasa
    </div>
  </div>
  <div id="navBar">
    <ul>
      <li>Home</li>
      <li>Latest News</li>
      <li>Buy Tickets</li>
      <li>Blog</li>
      <li>More Info</li>
      <li>Contact us</li>
    </ul>
  </div>
  <div id="top_left">
    <p class="simplePar">All of these are under the <span>divs</span>
    </p>
  </div>
  <div id="top_right">
    <p class="simplePar">All of these are under the <span>divs</span>
    </p>
  </div>
  <div id="bot_left">
    <p class="simplePar">All of these are under the <span>divs</span>
    </p>
  </div>
  <div id="bot_right">
    <p class="simplePar">All of these are under the <span>divs</span>
    </p>
  </div>
  <div id="footer"></div>
</body>
</html>

对于如此简单的结构，您有太多的div 和样式。当然，这可以通过多种方式完成，这里有其中之一：

<div id="header">
  <a href="http://google.com/"><img id="image" src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Example_logo.jpg"></a>
  <span>pasa</span>
</div>
#header { 
    text-align:center;
    line-height: 120px;
    font-size:24px;
}
#image
{
    height: 120px;
    width: 150px;
    position:absolute;
    left:0;
}

如果您想要的是标题以图像后面的剩余空间为中心（而不是在页面本身居中），那么只需删除位置：绝对样式并放置 float：left。

您应该简化标记，然后您的样式规则将更容易理解（对您和浏览器而言......您还遇到以下错误：

 position: block;

不存在。

div#title的位置设置为绝对值。 margin: 0 auto不适用于绝对定位的元素，因为它们是脱离上下文的。

更改 #title {display： block; position： relative ;}您正在通过上部的内部块进行解散，并且位置绝对不会像!!之前的消息中所说的那样@Paul

工作

相关内容

最新更新

热门标签：