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

时间：2015-11-12 17:27:28

标签： html css

我创建了一个用于在纯CSS中创建带或不带箭头的线条的样式，问题是我无法垂直对齐我的箭头与垂直对齐中间，水平对齐正文与文本 - 中心;

我也试过桌面显示器。

请考虑使用less编译css。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

您必须将float规则移至.box元素 使用display: table-cell或display: inline-block，他们仍然会在另一个旁边。

答案 2 :(得分：0)

你可以在css中使用行高来将它对齐到中间..注意你必须使用与行高相同的值来将它放在中心。当你使用较少时，你可以添加高度到变量并使用它.. 

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

希望这会有所帮助......

答案 3 :(得分：0)

您可以移除.box上的浮动。我没有看到它的任何价值。相反，您可以使用display: table，display: table-cell属性。

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

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

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

在我看来，最简单的方法是添加行高：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>

相关问题
最新问题