自适应HTML-图像上的垂直线

debugcn 发表于 Dev

沙尼卜

请帮助我创建一个html部分，如下图所示。我已经使用了div表并创建了基本结构。但是我无法在中心图像上实现垂直线。因为这是响应页面，所以我无法给出固定值。请为此指导我在此处输入图片说明

设计艺术

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。