Выровнять текст сверху, справа, снизу и слева от изображения?

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 элементов (кстати в широкой области просмотра левого текста также не так красиво уложены прямо сейчас.) в другой элемент, например:

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

Имея это, вы будете иметь возможность легко выровнять span сек insid e путем предоставления им position: absolute.

Answer 3

использование позиции: абсолютный; вместо положения: относительный;

Updated fiddle