Drei Spalten, mittlere Spalte mit absoluten Symbol

Question

Ich habe drei Spalten mit einer mittleren Spalte mit einem absoluten Symbol auf der Seite gemacht, aber das Problem passiert, wenn Sie es in der mobilen zeigen oder der Bildschirm ist anders, dass meine. Wenn Sie die Größe des Bildschirms ändern, bewegt sich das Symbol nach links.

Das Problem ist, dass ich eine absolute Position für das Symbol verwendet habe, gibt es keine andere Möglichkeit, es zu tun?

Ich möchte dies erhalten:

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

Statt das left oder right Attribut auf dem absoluten positionierten Elemente der Einstellung verwenden auto, um es zu zentrieren, und dann linken/rechten Rand, um es entlangzuschubsen.

z. Diese Einstellungen sehen ungefähr richtig aus:

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