如何根据图像大小将文本垂直放置在图像旁边？答案

【问题标题】：How to position text vertically beside image depending on image size?如何根据图像大小将文本垂直放置在图像旁边？
【发布时间】：2020-10-28 01:40:29
【问题描述】：

如何将文本垂直放置在图像右下角旁边的图像旁边？图像始终居中，但并不总是相同的大小，它可以有不同的宽度和高度。我正在尝试完成的示例

这里是Codepen

.featuredimg {
  position: relative;
  text-align: center;
  margin-bottom: 20px; 
}

.author {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(90deg) translate(-50%,-100%);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="featuredimg">
  <img src="https://via.placeholder.com/550">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

<div class="featuredimg">
  <img src="https://via.placeholder.com/850">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

<div class="featuredimg">
  <img src="https://via.placeholder.com/1250">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

【问题讨论】：

标签： html css css-transforms

【解决方案1】：

将display: inline-block 应用于图像并在包含文本的旋转元素上使用transform-origin: bottom right。您可以使用.author 中的bottom 参数来微调文本的精确垂直位置。

.featuredimg {
  position: relative;
  text-align: center;
  margin-bottom: 20px; 
  display: inline-block;
  vertical-align: bottom;
}

.author {
    position: absolute;
    right: 0;
    bottom: 4px;
    transform: rotate(90deg);
    transform-origin: bottom right;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="featuredimg">
  <img src="https://via.placeholder.com/550">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

<div class="featuredimg">
  <img src="https://via.placeholder.com/850">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

<div class="featuredimg">
  <img src="https://via.placeholder.com/1250">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

【讨论】：