Question

我有一个宽度固定且居中的容器。在容器内部，我有两个DIV相对于窗口并排放置。在这些Div中，我还有其他内容，我希望将其置于中心位置（最好使用容器）。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
 #container {
 width: 960px;
 height: 1000px;
 background: red;
 margin: 0 auto;
 }  

#windowdiv {
height: 200px;
background: purple;
padding-top: 20px;
position: absolute;
left: 0;
right: 30%;
top: 25px;
}
#windowdiv2 {
height: 200px;
background: blue;
padding-top: 20px;
position: absolute;
left: 60%;
right: 0;
top: 10px;

}

</style>
</head>
<body>
  <div id='container'>

     <div id='windowdiv'>
        <p>some content</p>
     </div>
     <div id='windowdiv2'>
       <p>some content</p>
     </div>
 </div>
</body>
</html>

Answer 1

将此内容添加到CSS中，将文本置于这些框的中间位置：

#windowdiv p, #windowdiv2 p {
    text-align: center;
    height: 100%;
    line-height: 180px;   
}

这假设你的盒子是固定的高度，因为我们设置了行高。（200px - 20px（填充顶部）= 180px）

将内容保持在绝对定位的DIV中心（在父容器内）

1 个答案: