垂直线居中于div之上

Question

我想在HTML和CSS中完成这项工作。我可以使用边框和填充来完成框。但是我如何得到上面的那一行呢？

这是我到目前为止所做的：

＆＃13;

＆＃13;

.november {
  padding: 1%;
  border: 2px solid #000;
}

＆＃13;

<div class="november">November 2014</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

伪元素善良

HTML

这是一个班轮：

<div>November 2014</div>

CSS

使用:before pseudo element：

创建垂直线

• :before伪元素被赋予position: absolute

• left: 50%将行移至中间，bottom: 100%弹出div上方的行

• 该行由2px宽度

创建

• margin-left: -2px将第2px行向左移动以正确偏移其位置（这等于宽度）

div为position: relative而position: absolute :before将与其相关。 div上方的空格是用上边距创建的。

完整示例

在此示例中，display: inline-block允许div扩展和缩回其内容。

＆＃13;

＆＃13;

div {
  padding: 10px;
  border: solid 2px #000;
  display: inline-block;
  position: relative;
  margin-top: 50px;
}
div:before {
  content: '';
  width: 2px;
  height: 50px;
  background: #000;
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -2px;
}

＆＃13;

<div>November 2014</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我试过这个并且做对了：

＆＃13;

＆＃13;

body {
  background: #EEE;
}
.november {
  margin: 0;
  padding: 1%;
  border: 2px solid white;
  clear: both;
}

＆＃13;

<div class="col-sm-2">
  <hr style="width: 2px; border-top: 50px solid white; padding: 0; text-align: center; margin: auto;" />
  <div class="november">November 2014</div>
</div>

＆＃13;

＆＃13;

＆＃13;