三列，中间列与绝对图标

Question

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

问题是我在图标上使用了绝对位置，没有其他方法可以做到吗？

我想获得这个：

Codepen Code

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

E.g。这些设置看起来是正确的：

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