html - 在 div 中放置一个字符作为背景

Question

我想创建以下布局:

+----------------------------------+
|               TITLE              |
|                                  |
|                 +                |
|                                  |
|            (drop here)           |
+----------------------------------+

使用以下 HTML:

<div class="drop-box">
  <p>TITLE</p>
  <p>(drop here)</p>
</div>

和 CSS:

.drop-box {
  width: 300px;
  height: 150px;
  border: 1px solid black;
  text-align: center;
}

.drop-box:before {
  content: "+";
  width: 100%;
  height: 100%;
  font-size: 3em;
  text-align: center;
  line-height: 150px;
  display: block;
}

问题是文本现在被放置在带有“+”的框下方。我怎样才能把文本放在盒子里。我尝试对 p 标签使用 position: relative 但这不起作用。

我在这里为此创建了一支笔:http://codepen.io/kdbruin/pen/ryMjgb

Answer 1

我会在段落上设置行高并在十字上设置绝对位置，如下所示:

.drop-box {
  width: 300px;
  height: 150px;
  border: 1px solid black;
  text-align: center;
  position:relative;
}
.drop-box p{
  line-height:50px;
}
.drop-box:before {
  content: "+";
  width: 100%;
  height: 100%;
  font-size: 3em;
  line-height: 150px;
  position:absolute;
  left:0px;
}

<div class="drop-box">
  <p>TITLE</p>
  <p>(drop here)</p>
</div>