Css 对齐图像顶部、右侧、底部和左侧的文本？

我试图在图像的所有四个面上添加文本，但我无法使正确的文本正确对齐。右边的文本仍然在左边

小提琴：

顶部的文本
左侧文本
右边的文本
底部文本
img{
最大宽度：100%；
高度：自动；
边框：0px无；
垂直对齐：中间对齐；
显示：块；
保证金：0自动；
}
.顶部，.底部{
显示：块；
文本对齐：居中；
左边距：自动；
右边距：自动；
溢出：隐藏；
}
.左{
显示：内联块；
背景色：#FF0；
变换：旋转（-90度）；
位置：相对位置；
顶部：200px；
左：0px；
}
.对{
显示：内联块；
背景色：#F00；
变换：旋转（90度）；
位置：相对位置；
右：0px；
底部：200px；
}

（顺便说一句，在更宽的视口中，左侧文本现在也没有那么好地布局；）

您必须将所有这5个元素包装到另一个元素中，例如：

.wrapper {
    display: inline-block;
    position: relative;
}

---

有了这一点，你就可以通过给你的

位置：绝对的
你应该在你的图像周围加上包装（现在可以是身体），并给它
位置：相对的然后修改。右类：

.right {
    display: inline-block;
    background-color: #F00;
    transform: rotate(90deg) translate(0, -50%);
    position: absolute;
    right: 0px;
    top: 50%;
}

使用位置：绝对位置；代替位置：相对

谢谢@Bogdan Kuštan解决了这个问题！
.right {
    display: inline-block;
    background-color: #F00;
    transform: rotate(90deg) translate(0, -50%);
    position: absolute;
    right: 0px;
    top: 50%;
}