對齊圖像頂部，右側，底部和左側的文本？

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