3つの列、絶対的なアイコンの中央の列

Question

私は側面に絶対的なアイコンを持つ中央の列で3つの列を実行しましたが、モバイルでそれを表示するか画面が私と異なる場合に問題が発生します。画面のサイズを変更すると、アイコンが左に移動します。

問題はアイコンの絶対位置を使用していることです。他の方法はありませんか？

私はこの取得したい：

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属性を設定し、を使用しますを中央に配置し、次に左/右のマージンを調整します。

など。これらの設定は正しく表示されます。

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