css 是否有一个灵活的方式来垂直中心旁边的图像文本框顶行？

cyvaqqii 于 2023-05-19 发布在其他

关注(0)|答案(2)|浏览(193)

看起来很容易，但我不能找出正确的css平衡。
我想要的，是这个结果（橙子块是图像）：

这很容易，如果图像有固定的高度和文本固定的属性（行高等），但我需要这个工作，即使我把它插入到我的网站上的不同地方，它需要自动调整到图像和文本属性的大小。因此，如果图像变大，或文本具有不同的大小/行高，它仍然有效。我可能会省略文本变化，但不同大小的图像需要工作。
到目前为止，我只得到了display: flex与align-items: center，但这只适用于一行，一旦它打破了新的一行，它的中心整个文本块，这是错误的。一定有一些css技巧来实现这一点，对不对？
编辑：经过另一次尝试，我设法想出了更好的东西，但文本仍然需要控制（文本的最高值必须是：行高/ -2）

.txticon {max-width: 250px; display: block; margin-bottom: 15px; display: flex;}
.txticon::after {content: ""; clear: both; display: table;}
.txticon img {float: left; margin-right: 10px;}
.txticon span {line-height: 20px; top: -10px; position: relative; overflow: hidden; transform: translateY(50%);}

<a class="txticon" href="#">
  <img class="icon" src="https://via.placeholder.com/100x100" alt="">
  <span>One line text</span>
</a>
<a class="txticon" href="#">
  <img class="icon" src="https://via.placeholder.com/100x100" alt="">
  <span>Multiple line text which is really really really long</span>
</a>

css

来源：https://stackoverflow.com/questions/72302424/is-there-a-flexible-way-to-vertically-center-top-line-of-text-box-beside-image

2条答案

按热度按时间

fumotvh31#

<div class="row">
  <img />
  <p>Text</p>
</div>

.row {
  display: flex;
  align-items: center;
}

这可能有用

赞(0）回复(0）举报 2023-05-19

oyt4ldly2#

文本块上的margin-top是否有效？

<div class="row">
  <img />
  <p class="text">Text</p>
</div>

.row {
  display: flex;
  align-items: flex-start;
}
.text {
  margin-top: 10px; // replace with half of the image height
}

赞(0）回复(0）举报 2023-05-19

我来回答

css 是否有一个灵活的方式来垂直中心旁边的图像文本框顶行？

2条答案

相关问题

热门标签

最新问答