html - 为什么水平箭头不垂直对齐？

Question

我正在创建一种样式，用于在纯 css 中创建带或不带箭头的线条，问题是我无法将我的箭头与垂直对齐中间垂直对齐，水平对齐与文本对齐中心可以正常工作；

我也尝试过使用表格单元格显示。

请考虑 css 是用 less 编译的。

.box {
  background-color: lightgray;
  width: 200px;
  height: 200px;
  margin-right: 1em;
  float: left;
  vertical-align: middle;
  text-align: center;
  display: table-cell;
}
.linea-h {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border-top: 2px dotted dimgray;
  border-radius: 4px;
  height: 0;
}
.linea-h > * {
  position: absolute;
  transform: rotate(45deg);
  height: 8px;
  width: 8px;
}
.linea-h .left-arrow {
  margin-top: -6px;
  border-left: 2px solid dimgray;
  border-bottom: 2px solid dimgray;
  left: 0;
}
.linea-h .right-arrow {
  margin-top: -6px;
  border-right: 2px solid dimgray;
  border-top: 2px solid dimgray;
  right: 0;
}
.linea-v {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border-left: 4px dotted dimgray;
  border-radius: 8px;
  width: 0;
}
.linea-v > * {
  position: absolute;
  transform: rotate(45deg);
  height: 8px;
  width: 8px;
}
.linea-v .top-arrow {
  margin-left: -8px;
  border-left: 4px solid dimgray;
  border-top: 4px solid dimgray;
  top: 0;
}
.linea-v .bottom-arrow {
  margin-left: -8px;
  border-right: 4px solid dimgray;
  border-bottom: 4px solid dimgray;
  bottom: 0;
}

<div class="box">
  <div class="linea-h" style="width: 200px">
    <div class="left-arrow"></div>
    <div class="right-arrow"></div>
  </div>
</div>
<div class="box">
  <div class="linea-v" style="height: 200px">
    <div class="top-arrow"></div>
    <div class="bottom-arrow"></div>
  </div>
</div>

Answer 1

尝试使用以下属性在 CSS 中垂直对齐:

 position: relative;
 top: 50%;
 transform: translateY(-50%);

我对您的 linea-h 类进行了一些更改以反射(reflect)这一点。

.box {
  background-color: lightgray;
  width: 200px;
  height: 200px;
  margin-right: 1em;
  float: left;
  vertical-align: middle;
  text-align: center;
  display: table-cell;
}
.linea-h {
  box-sizing: border-box;
  border-top: 2px dotted dimgray;
  border-radius: 4px;
  height: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.linea-h > * {
  position: absolute;
  transform: rotate(45deg);
  height: 8px;
  width: 8px;
}
.linea-h .left-arrow {
  margin-top: -6px;
  border-left: 2px solid dimgray;
  border-bottom: 2px solid dimgray;
  left: 0;
}
.linea-h .right-arrow {
  margin-top: -6px;
  border-right: 2px solid dimgray;
  border-top: 2px solid dimgray;
  right: 0;
}
.linea-v {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border-left: 4px dotted dimgray;
  border-radius: 8px;
  width: 0;
}
.linea-v > * {
  position: absolute;
  transform: rotate(45deg);
  height: 8px;
  width: 8px;
}
.linea-v .top-arrow {
  margin-left: -8px;
  border-left: 4px solid dimgray;
  border-top: 4px solid dimgray;
  top: 0;
}
.linea-v .bottom-arrow {
  margin-left: -8px;
  border-right: 4px solid dimgray;
  border-bottom: 4px solid dimgray;
  bottom: 0;
}

<div class="box">
  <div class="linea-h" style="width: 200px">
    <div class="left-arrow"></div>
    <div class="right-arrow"></div>
  </div>
</div>
<div class="box">
  <div class="linea-v" style="height: 200px">
    <div class="top-arrow"></div>
    <div class="bottom-arrow"></div>
  </div>
</div>