html - 想要垂直对齐页面

Question

期待下面的输出需要垂直对齐圆圈并期望箭头指向圆圈。

O-------->O-------->O

垂直对齐，箭头需要直接指向圆圈。还需要支持响应式。

.circle {
  background-color: #fff;
  border: 3px solid rgb(20, 5, 5);
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
}

.center {
  text-align: center;
}

.line {
  border-bottom: 2px dashed black;
}

.line:after {
  content: ">";
  color: black;
  font-weight: bold;
  font-size: 25px;
  float: right;
  margin-top: -15px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br/><br/><br/><br/><br/>
<div class="row">
  <!-- start section -->
  <div class="col-md-12 center">
    <div class="col-md-2 center">
      Start
      <div class="circle" center></div>
      30-07-2018 11:00
    </div>
    <div class="col-md-3 center">
      <div class="line"></div>
    </div>
    <div class="col-md-2 center">
      Middle
      <div class="circle" center></div>
      30-07-2018 11:00
    </div>
    <div class="col-md-3 center">
      <div class="line"></div>
    </div>
    <div class="col-md-2 center">
      End
      <div class="circle" center></div>
      30-07-2018 11:00
    </div>
  </div>
</div>

Answer 1

我想你正在寻找这样的东西。和工作 Demo 在这里

.timeline {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.li {
  transition: all 200ms ease-in;
}

.timestamp {
  margin-bottom: 20px;
  padding: 0px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 100;
}

.status {
  padding: 40px 40px;
  display: flex;
  justify-content: center;
  border-top: 2px solid #D6DCE0;
  position: relative;
  transition: all 200ms ease-in;
}
.status h4 {
  font-weight: 600;
}
.status:before {
  content: "";
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 25px;
  border: 1px solid #ddd;
  position: absolute;
  top: -15px;
  left: 42%;
  transition: all 200ms ease-in;
}

.li.complete .status {
  border-top: 2px solid #000000;
}
.li.complete .status:before {
  background-color: #000000;
  border: none;
  transition: all 200ms ease-in;
}
.li.complete .status h4 {
  color: #000000;
}

@media (min-device-width: 320px) and (max-device-width: 700px) {
  .timeline {
    list-style-type: none;
    display: block;
  }

  .li {
    transition: all 200ms ease-in;
    display: flex;
    width: inherit;
  }

  .timestamp {
    width: 100px;
  }

  .status:before {
    left: -8%;
    top: 30%;
    transition: all 200ms ease-in;
  }
}
html, body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  font-family: "Titillium Web", sans serif;
  color: #758D96;
}

<ul class="timeline" id="timeline">
  <li class="li complete">
    <div class="timestamp">
      <span class="author">First Time</span>
      <span class="date">11/15/2014<span>
    </div>
    <div class="status">
      <h4> First Created </h4>
    </div>
  </li>
  <li class="li complete">
    <div class="timestamp">
      <span class="author">Second Time</span>
      <span class="date">11/15/2014<span>
    </div>
    <div class="status">
      <h4> Second Completed </h4>
    </div>
  </li>
  <li class="li complete">
    <div class="timestamp">
      <span class="author">Third Time</span>
      <span class="date">11/15/2014<span>
    </div>
    <div class="status">
      <h4>Third Approval </h4>
    </div>
  </li>
  <li class="li">
    <div class="timestamp">
      <span class="author">Last Time</span>
      <span class="date">TBD<span>
    </div>
    <div class="status">
      <h4> finished </h4>
    </div>
  </li>
 </ul>