Question

我正在尝试将飞行持续时间对准在每条飞行路径的中间（蓝线）。但它不起作用，持续时间（1:30）不完全在行的中间，文本不居中。我该如何解决这个问题？

HTML：

<span class="col-md-12 roundtrip">
  <div class="col-md-6 trip">Outbound
    <div class="flight">Los Angeles</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">Chicago</div>
    <div class="connection">5hr wait</div>
    <div class="flight">Chicago</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">New York</div>
    <div class="connection">2hr wait</div>
    <div class="flight">New York</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">Amsterdam</div>
  </div>
  <div class="col-md-6 trip">Inbound
    <div class="flight">Amsterdam</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">Los Angeles</div>
    <div class="flight">Los Angeles</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">Amsterdam</div>

  </div>
</span>

LESS：

.roundtrip {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
}
.trip {
  width: 100px;
  text-align: center;
  border: 1px solid black;
  margin: 0px 3px;
  display: flex;
  flex-direction: column;
  margin-right: 50%;
}
.flight {
  white-space: nowrap;
}
.flight-path {
  width: 6px;
  min-height: 85px;
  flex-grow: 1;
  align-self: center;
  background-color: #6090FF;
  position: relative;
}
.connection {
  height: 40px;
  color: red;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flight-duration {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(255, 255, 255, .75);
  width: 81px;
  left: -38px;
  text-align: center;
}

Answer 1

您可以尝试表格布局。这有帮助吗？

.line {
  width: 5px;
  height: 200px;
  display: table;
  table-layout: fixed;
  text-align: center;
}

.time {
  display: table-cell;
  vertical-align: middle;
  background: #777;
  height: 10px;
  text-align: center;

}

span {
  background: #ccc;
  padding: 10px 0px;

}

<div class="line">
  <div class="time">
    <span>12:34pm</span>
  </div>
</div>

Answer 2

似乎每次我想要垂直对齐时我都会回到这个链接：

https://css-tricks.com/centering-css-complete-guide/

我喜欢用例的组织方式。

Div位置在另一个垂直元素

2 个答案: