与图像外左上角对齐的旋转文本？答案

【问题标题】：rotated text that is aligned to the top left corner outside of the image?与图像外左上角对齐的旋转文本？
【发布时间】：2015-01-20 17:23:16
【问题描述】：

我想知道将旋转文本直接放在图像左上角之外的最有效方法是什么？请记住，我希望文本框的高度与图像的高度一致，并且图像比例会有所不同（高图像、短图像、宽图像等）

这是我想要实现的视觉效果：

我该怎么做？提前谢谢！

糟糕，忘记添加 jsfiddle。你可以查看here!

.image.information {
  display:block;
  position:absolute;
  margin:0;
  top:45%;
  left:100%;
  height:100%;
  -webkit-transition:all 250ms linear;
  -o-transition:all 250ms linear;
  transition:all 250ms linear;
  transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.image-wrap {
  height: 100%;
  width: 100%;
  display: block;
}
.image-inner img {
  width: 500px;
  height: auto;
  display: block;
}

<div class="image-wrap">
  <img class="image-inner" src="http://i.stack.imgur.com/YyMHW.jpg" alt="" />
  <div class="image information">
    information<br/>
    informa<br/>
    info
  </div>
</div>

【问题讨论】：

绝对定位对你有帮助。但我会将它包含在图片本身而不是文本中，因为它是图片的一部分。
哎呀！抱歉，这是 jsfiddle：jsfiddle.net/kenhimself/sx6mem8j

标签： html css image text alignment

【解决方案1】：

这可以使用 CSS3 转换，但需要在 DOM 中添加一个额外的元素：

<div class="image-wrap">
    <img class="image-inner" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/08/korea5b.jpg" alt="" />
    <div class="image information">
      <div class="info-inner">
        information
        <br/>informa
        <br/>info
      </div>
    </div>
</div>

现在有了一些绝对定位魔法：

.image.information {
    position:absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 75px;
    background: #ccc;
}
.info-inner {
    text-align: center;
    position: absolute;
    top: 50%; 
    left: 50%; 
    margin-top:-75px;
    margin-left: -75px;
    height:55px;
    width: 150px;
    vertical-align: bottom;
    transform: rotate(90deg);
}
.image-wrap {
    height: 100%;
    width: 100%;
    position: relative;
}
img.image-inner {
    width: 300px;
    margin-left: 75px;
}

请注意，如果不指定明确的文本高度，则没有简单的方法可以使文本垂直居中。在这种情况下，我选择了 55px。它将拉伸以匹配您指定的任何图像的高度。

JSFiddle：http://jsfiddle.net/zephod/ckqcLsbv/2/

【讨论】：