Symbol in der Mitte der Tabelle ausrichten

Question

Ich muss den Pfeil in der Mitte der Tabellenzelle ausrichten. Ich habe vertical-align: middle; hinzugefügt, aber es funktioniert nicht. Bitte helfen Sie mir, dieses Problem zu beheben.

.table { 
 
    display: table; 
 
    border: 1px solid black; 
 
} 
 

 
.table-cell { 
 
    height: 30px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding-left: 25px; 
 
    padding-right: 25px; 
 
} 
 

 
img { 
 
    float: right; 
 
} 
 

 
date { 
 
    display: block; 
 
}

<div class="table"> 
 
    <div class="row"> 
 

 
    <div class="table-cell"> 
 
     <span>Lorem ipsum</span> 
 
    </div> 
 
    <div class="table-cell"> 
 
     <span>Lorem ipsum</span> 
 
    </div> 
 
    <div class="table-cell"> 
 
     <span>Text1 lorem</span> 
 
     <date>28-01-2017</date> 
 
     <img src="https://image.flaticon.com/icons/svg/60/60758.svg" width="12px" height="12px"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Sie position:absolute verwenden müssen, verwendet haben. Ich muss dir vorschlagen, deinem Icon Klasse zu geben. So werden Konflikte in Zukunft vermieden. Wenn Sie img in Tabelle verwenden.

.table { 
 
     display: table; 
 
     border: 1px solid black; 
 
     position: relative; 
 
    } 
 

 
    .table-cell { 
 
     height: 30px; 
 
     display: table-cell; 
 
     vertical-align: middle; 
 
     padding-left: 25px; 
 
     padding-right: 25px; 
 
    } 
 

 
    img.right-icon { 
 
     position: absolute; right:5px; top: 50%; transform: translateY(-50%); 
 
    } 
 

 
    date { 
 
     display: block; 
 
    }

<div class="table"> 
 
     <div class="row"> 
 

 
     <div class="table-cell"> 
 
      <span>Lorem ipsum</span> 
 
     </div> 
 
     <div class="table-cell"> 
 
      <span>Lorem ipsum</span> 
 
     </div> 
 
     <div class="table-cell"> 
 
      <span>Text1 lorem</span> 
 
      <date>28-01-2017</date> 
 
      <img class="right-icon" src="https://image.flaticon.com/icons/svg/60/60758.svg" width="12px" height="12px"> 
 
     </div> 
 
     </div> 
 
    </div>

Answer 2

bitte die unten stehende Antwort überprüfen, zu Ihrer Information i position:absolute für das Bild

.table { 
 
    display: table; 
 
    border: 1px solid black; 
 
    position:relative; 
 
} 
 

 
.table-cell { 
 
    height: 30px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding-left: 25px; 
 
    padding-right: 25px; 
 
} 
 

 

 
.table img { 
 
    float: right; 
 
    position: absolute; 
 
    right: 5px; 
 
    top: 39%; 
 
} 
 

 
date { 
 
    display: block; 
 
}

<div class="table"> 
 
    <div class="row"> 
 

 
    <div class="table-cell"> 
 
     <span>Lorem ipsum</span> 
 
    </div> 
 
    <div class="table-cell"> 
 
     <span>Lorem ipsum</span> 
 
    </div> 
 
    <div class="table-cell"> 
 
     <span>Text1 lorem</span> 
 
     <date>28-01-2017</date> 
 
     <img src="https://image.flaticon.com/icons/svg/60/60758.svg" width="12px" height="12px"> 
 
    </div> 
 
    </div> 
 
</div>