[英]How do I keep this image in the floated div centered vertically when the text wraps?
我進行了一些研究,以弄清楚在換行后如何使文本與紅色框(將被圖標替換)對齊。
但是現在由於浮動,圖標被提升到容器<td>
的頂部。 不幸的是,在鏈接換行為兩行之后,我現在div.imgwrap
停留在如何將div.imgwrap
垂直居中的父級中。
是否可以僅使用CSS來執行此操作,而無需修改HTML? 顯而易見的解決方案是為圖標添加一個額外的列,但這將需要更多的工作。
<table>
<tr class="">
<td>
<div class="imgwrap">
<img src="https://i.imgur.com/H2Vulqm.png" alt="[ ]" width="16" height="16">
</div>
<a href="test">test really long name....</a>
</td>
<td>smaller column</td>
<td>small column</td>
<td>medium size column</td>
</tr>
</table>
CSS:
table,
tr,
td {
border: solid 1px black;
padding: 1em;
text-align: left;
vertical-align: middle;
line-height: 1.125rem;
font-size: 0.875rem;
font-family: sans-serif;
}
.imgwrap {
vertical-align: middle;
display: inline-block;
margin-right: 8px;
float: left;
}
.imgwrap + a {
vertical-align: middle;
display: block;
margin-left: 24px;
}
.imgwrap img {
display: block;
}
a {
text-decoration: none;
}
這就是你想要的嗎?
http://jsfiddle.net/fzvy5oca/22/
的CSS
td {
position: relative;
border: solid 1px black;
padding: 1em;
text-align: left;
vertical-align: middle;
line-height: 1.125rem;
font-size: 0.875rem;
font-family: sans-serif;
}
.imgwrap {
position: absolute;
top: 50%;
margin-top: -8px; /* half of #imgwrap's height */
vertical-align: middle;
display: inline-block;
margin-right: 8px;
float: left;
}
這是你想要的?
table, tr, td { border: solid 1px black; padding: 1em; text-align: left; vertical-align: middle; line-height: 1.125rem; font-size: 0.875rem; font-family: sans-serif; /*Added*/ position: relative; } .imgwrap { vertical-align: middle; /*display: inline-block; removed */ margin-right: 8px; /*float: left; removed */ /*Added*/ position: absolute; top: 50%; transform: translateY(-50%); } .imgwrap + a { vertical-align: middle; display: block; margin-left: 24px; } .imgwrap img { display: block; } a { text-decoration: none; }
<table> <tr class=""> <td> <div class="imgwrap"> <img src="https://i.imgur.com/H2Vulqm.png" alt="[ ]" width="16" height="16"> </div> <a href="test">test really long name.test really long name.test really long name.test really long name.test really long name.test really long name.test really long name.test really long name....</a> </td> <td>smaller column</td> <td>small column</td> <td>medium size column</td> </tr> </table>
.imgwrap { display: grid; align-items: center; grid-template-columns: auto 1fr; margin-right: 8px; }
<table> <tr class=""> <td> <div class="imgwrap"> <img src="https://i.imgur.com/H2Vulqm.png" alt="[ ]" width="16" height="16"> <a href="test">test really long name....</a> </div> </td> <td>smaller column</td> <td>small column</td> <td>medium size column</td> </tr> </table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.