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

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>

少：

.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

假设这是您要移动的“1-30h”文本：

尝试将您的 .flight-duration class 定位为：

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

-40px 影响左边距，数字越小，文本越靠左。较高的数字会使文本位于蓝线的右侧。

Answer 2

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

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

Div position in the middle of another vertical div

html

css

less