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

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

你应该在你的图像周围添加包装器(现在它可以是 body)，并给它 position: relative; 然后修改 .right 类:

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

updated fiddle