css - 三列，中间列带有绝对图标

Question

我已经完成了三列，其中一个中间列在侧面有一个绝对图标，但是当您在移动设备上显示它或者屏幕与我的不同时，就会出现问题。如果您调整屏幕大小，图标会向左移动。

问题是我为图标使用了绝对位置，没有其他办法吗？

我想得到这个:

Codepen Code

 table{
  text-align:center;
  margin-top:20px;
}

td{
  padding: 20px;  
}

#midCol{
  background:lightblue;
  width:90px;
  
}

#iconArrow{
  color:red;
  font-size:100px;
  position: absolute;
  top:140px;
  right:985px;  
}

.col1{
  background:ghostwhite;  
  width:400px;
}

.col2{
  background:ghostwhite;  
    width:400px;
}

   <div class="container">
  <div class="row">
    <table border=0>
      <tr>
        <td class="col1">WORD</td> 
        <td id="midCol" rowspan="6">
          <h2 >C</br>R</br>E</br>A</br>T<span id="iconArrow" class="glyphicon glyphicon-triangle-right"></span></br>I</br>N</br>G</h2>
         </td>
          <td class="col2">SENTENCE</td>
      </tr>
      <tr>
        <td class="col1">WORD</td> 
        <td class="col2">SENTENCE</td>
      </tr>
      <tr>
        <td class="col1">WORD</td>  
        <td class="col2">SENTENCE</td>
      </tr>
      <tr>
        <td class="col1">WORD</td>
        <td class="col2">SENTENCE</td> 
      </tr>
      <tr>
        <td class="col1">WORD</td> 
        <td class="col2">SENTENCE</td> 
      </tr>
      <tr>
        <td class="col1">WORD</td> 
        <td class="col2">SENTENCE</td> 
      </tr>
    </table>
  </div>
</div>

Answer 1

不要在绝对定位元素上设置 left 或 right 属性，而是使用 auto 将其居中，然后左/右 margin 来插入它。

例如这些设置看起来是正确的:

#iconArrow {
  right: auto;
  margin-left: 6px;
  /* other attributes */
}