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

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 课程进行了一些更改以反映这一点。

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

Answer 2

您必须将float 规则删除到.box 元素 使用display: table-cell 或display: inline-block，它们仍将彼此相邻。

Answer 3

在我看来，最简单的方法是添加 line-height:200px;到你在 CSS 中的盒子类。 我已经测试过了，应该可以的。

.box {
  background-color: lightgray;
  width: 200px;
  height: 200px;
  line-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 4

您可以删除.box 上的浮动。我看不出它有什么价值。相反，您可以使用display: table、display: table-cell 属性。

如果你对 html 有一些控制，你可以在 box 元素上添加一个容器。然后，您可以在容器上应用以下CSS：

    display: table;
    border-collapse: separate;
    border-spacing: 14px 5px;

另外，.box 类需要有display: table-cell。见下文：

.boxContainer {
    display: table;
    border-collapse: separate;
    border-spacing: 14px 5px;
}
.box {
    background-color: lightgray;
    width: 200px;
    height: 200px;
    margin-right: 1em;
    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="boxContainer">
    <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>
</div>

Answer 5

您可以在 css 中使用 line height 将其对齐到中间。请注意，您必须使用与 line-height 中的 height 相同的值才能将其放置在 center 中。由于使用较少，您可以将高度添加到一个变量并使用它..

.box {
  background-color: lightgray;
  width: 200px;
  height: 200px;
  margin-right: 1em;
  float: left;
  vertical-align: middle;
  line-height: 200px;
  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>

希望这会有所帮助...