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

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

您应该添加来包裹你的图像（现在它可能是身体），广告给它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 2

;）

您必须包装所有的5个元素（BTW在更宽的视口左边的文字也没有这么好奠定了现在。）为另一种元素，例如：

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

到这一点，你就可以轻松地insid调整你的span小号e给他们position: absolute。

Answer 3

使用的位置是：绝对的;而不是位置：相对;

Updated fiddle