Question

我想在每条蓝线的中间左侧添加飞行持续时间。我试图做下面的技巧，但不幸的是没有用。

这就是目前的样子：

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

.connection {
  height: 40px;
  color: red;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flight-duration{
    margin:auto auto auto 0;
}

Answer 1

这是我最喜欢的技巧之一：

.element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

适用于您的具体示例：

.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%);
  
  /* Just messing around, centering the text horizontally too */
  white-space: nowrap;
  background: rgba(255, 255, 255, .75);
  width: 81px;
  left: -38px;
  text-align: center;
}

<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>
</span>

Source

Answer 2

确认你想要移动的'1-30h'文字：

尝试使用以下方法定位.flight-duration类：

    .flight-duration {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin:20px 0px 0px -40px;
}

-40px正在影响左侧边距，文本所处的位置越靠左侧。数字越大，文本就越位于蓝线的右侧。

Answer 3

在这里，将其添加到您的代码中：）

.flight-path {
  position: relative;
}
.flight-duration{
    display: block;
    position: absolute;
    right: 6px;
    width: 46px;
    text-align: center;
    top: 50%;
    transform: translateY(-50%)
}

我分叉你的codepen，展示一个新的演示 http://codepen.io/antraxis/pen/jbPpQY?editors=110

Div位置在另一个垂直div的中间

3 个答案: