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

Question

我正在创建一个风格创建线有或没有箭头在纯css中，问题是我不能垂直对齐我的箭头与垂直-对齐中间，水平的工作与文本-对齐中心正确；

.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;
}

html prettyprint-override"><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类做了一些修改，以反映这一点。

.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>