Question

我是新手，所以页面是为了练习。我似乎无法显示“p”或“h1”标签，应该是我页面的中间部分。这是我的HTML代码：

<body>
<div class="container">
<div id="top">
  <div id="bottom">
    <div id="left">
      <div id="right">
      </div>
      <!--Attempted to use a p tag here -->
    <!--right div end-->
  </div>
  <!--left div end-->
</div>
<!--bottom div end-->
</div>
<!--top div end-->
</div>
<!--container div end-->
<!--Attempted to use a p tag here as well thinking it may show up in a different location-->
</body>

我的CSS看起来像这样：

#top,
#bottom,
#left,
#right {
background: #666666;
position: fixed;
}

#left,
#right {
top: 0;
bottom: 0;
width: 100px;
}

#left {
left: 0;
}

#right {
right: 0;
}

#top,
#bottom {
left: 0;
right: 0;
height: 100px;
}

#top {
top: 0;
}

#bottom {
bottom: 0;
}

如果有人能让我知道我做错了什么，我将非常感激。我试图把这个定位搞得一团糟而没有运气，我也尝试给p标签一个z-index，但我不知道这是否是一个可以正常工作的东西。

Answer 1

中间元素的技巧是：

#left{
    margin-left: auto;
    margin-right: auto;
}

但是如果您只想将<h1>或<p>置于中心位置，那么这样可行：

p {
    text-align: center;
}
h1 {
    text-align: center;
}

Answer 2

这是达到你想要的完全可以接受和简单的方式。

＆＃13;

body {
  background-color: #666666;
  width: 100%;
  margin: 0;
}
#container {
  background-color: blue;
  width: 80%;
  height: 100px;
  margin: auto;
}
h1 {
  text-align: center;
}
p {
  text-align: center;
}

＆＃13;

<body>
  <div id="container">
    <h1>HEADER 1</h1>
    <p>PARAGRAPH 1</p>
  </div>
</body>

＆＃13;

Answer 3

使用float并在css段中清除

＆＃13;

<html>
<head>
<style type="text/css">
#wrapper{background-color:red;width:100%; margin: auto;}
#top{background-color:blue;  height:100px;}
#left{background-color:green;   width:10%; height:100px;float:left;}
#right{background-color:yellow;  width: 10%; height:100px;float:right;}
#bottom{background-color:grey; height:100px;clear:left;}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">top</div>
<div id="left">left</div>background
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>

＆＃13;

无法让我的html标签显示在我的div边框内

3 个答案: