對齊圖表中間的圖標

Question

我需要對齊表格單元格中間的箭頭。我添加了vertical-align: middle;，但它不起作用。請幫我解決這個問題。

.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

你需要使用position:absolute。我必須建議你爲你的偶像提供課堂。所以將來會避免任何衝突。如果您在表中使用img。

.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

請檢查下面的答案，爲您的信息，我已經使用position:absolute的圖像

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