簡體   English   中英

文字換行時,如何在浮動div中將此圖像保持在垂直居中位置?

[英]How do I keep this image in the floated div centered vertically when the text wraps?

我進行了一些研究,以弄清楚在換行后如何使文本與紅色框(將被圖標替換)對齊。

但是現在由於浮動,圖標被提升到容器<td>的頂部。 不幸的是,在鏈接換行為兩行之后,我現在div.imgwrap停留在如何將div.imgwrap垂直居中的父級中。

是否可以僅使用CSS來執行此操作,而無需修改HTML? 顯而易見的解決方案是為圖標添加一個額外的列,但這將需要更多的工作。

http://jsfiddle.net/fzvy5oca/

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

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM