Question

我正在尝试将DIV中的元素放置在该DIV中而不是整个页面中。一个例子是我有两个容器，我希望容器2在容器1中居中。我有一些代码，但不完全确定如何实现它...

谢谢，皮埃尔

HTML

<div class="whatiscss">
    <div class="whatiscsstextbox">
        <div class="whatiscsstextboxheading"> Content Wording  <br> </div>
        <div class="whatiscsstextboxbody"> Content Wording </div>
    </div>
</div>

CSS

.whatiscss {
    width: auto;
    height: 700px;
    background-color: #fcfcfc;
    padding: 0px;
    margin: 0px;
    display: inline-block;
}

.whatiscsstextbox {
    width: auto;
    height: 700px;
    background-color: #fcfcfc;
    padding: 0px;
    margin: 0px;
    position: absolute;
    display: inline-block;
}

.whatiscsstextboxheading {
    border: 1px dashed #e5e4e2;
    width: 500px;
    height: auto;
    text-align: center;
    font-size: 28px;
    font-family: 'Raleway', sans-serif;
    color: #fc3436;
    font-style: normal;
    letter-spacing: 1px;
    word-spacing: 2px;
    display: inline-block;
}

.whatiscsstextboxbody {
    border: 1px dashed #e5e4e2;
    width: 500px;
    height: auto;
    text-align: center;
    font-size: 20px;
    font-family: 'Raleway', sans-serif;
    color: #fc3436;
    font-style: normal;
    letter-spacing: 1px;
    word-spacing: 2px;
    line-height: 2;
    display: inline-block;
}

Answer 1

为了相对于父元素定位一个元素，应用position:relative（除静态以外的任何东西都会起作用，但relative没有任何副作用）父级和position:absolute表示您希望相对于父级的内容。

绝对定位元素将相对于position以外static的最近祖先定位。

例如，

.whatiscss {
  position:relative;
}
.whatiscsstextbox {
  position: absolute;
  top: 50%;
  left: 50%;
}

如何使定位在DIV中工作而不是整个页面？

1 个答案: