响应式Html - 跨图像的垂直线

Question

请帮我创建一个如下图所示的html部分。我使用了div表并创建了基本结构。但我无法在中心图像上实现垂直线。由于这是响应式页面，我无法给出固定值。请指导我

Answer 1

假设图标是图像，你应该知道px中的尺寸，对吧？ 然后，将所有内容包装在父元素，图标和表本身中，如此处所示的示例。

＆＃13;

＆＃13;

.parent {
  position: relative;
}
.parent table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}
.icon {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -32px;
  margin-top: -32px;
  width: 64px;
  height: 64px;
  background: #e5e5e5
 url(https://cdn4.iconfinder.com/data/icons/nature-and-ecology/128/Nature__Eco_water_reuse-64.png) no-repeat;
  border-radius: 32px;
}
.left,
.right {
  border: 1px solid #252122;
  text-align: center;
  padding: 15px;
  width: 50%;
  vertical-align: middle;
}
table span {
  display: block;
}
table td span:first-child {
  font-size: 48px;
}

＆＃13;

<!-- Transparent icon by iconfinder.com, example only -->
<div class="parent">
  <!--Positioned absolute, image transparent, css background set manually-->
  <div class="icon"></div>
  <table>
    <td class="left">
      <span>FROM</span>
      <span>Select Departure</span>
    </td>
    <td class="right">
      <span>TO</span>
      <span>Select Arrival</span>
    </td>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;