对齐图像的顶部，右侧，底部和左侧的文字？

Question

我试图在图像的四个边上添加文字，但我无法正确对齐正确的文字。正确的文字仍在左侧。

FIDDLE：https://jsfiddle.net/y75L0ww9/

<span class="top">Text on top</span>
<span class="left">Text on left side</span>
<img src="http://www.uaa.alaska.edu/web/images/horizontal-large.jpg" />
<span class="right">Text on right side</span>
<span class="bottom">Text on bottom</span>

img {    
    max-width: 100%;
    height: auto;
    border: 0px none;
    vertical-align: middle;
    display:block;
    margin:0 auto;
}

.top, .bottom {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.left {
    display: inline-block;
    background-color: #FF0;
    transform: rotate(-90deg);
    position: relative;
    top: 200px;
    left: 0px;
}

.right {
    display: inline-block;
    background-color: #F00;
    transform: rotate(90deg);
    position: relative;
    right: 0px;
    bottom: 200px;
}

Answer 1

（ btw。在更宽的视口中，左边的文字现在也没有那么好地布置;））

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

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

有了这个，您就可以轻松地将span内部position: absolute与{{1}}对齐。

Answer 2

你应该在你的图像周围添加包装器（现在它可以是正文），ad给它position: relative;然后修改.right类：

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

updated fiddle

Answer 3

使用position：absolute;而不是位置：相对;

Updated fiddle