jquery - Responsive Html - vertical line across image -


please me create html section below image. have used div table , created basic structure. cannot able implement vertical line across centr image.as responsive page cannot able give fixed values.please guide me on enter image description here

assuming icon image, should know sizes in px, right? then, wrap inside parent element, icon , table itself, example shown here.

.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 iconfinder.com, example -->  <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>


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -