对齐图表中间的图标

问题描述：

我需要对齐表格单元格中间的箭头。我添加了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>

为什么不使用'位置：absolute'这个？ –

答

你需要使用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>

答

请检查下面的答案，为您的信息，我已经使用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>

对齐图表中间的图标

相关推荐