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

Question

我正在尝试在图像的所有四个边上添加文本，但无法正确对齐正确的文本。右边的文字还在左边。

<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

(顺便说一句。在更宽的视口中，左侧文本现在的布局也不是很好 ;) )

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

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

有了这个，您就可以通过给 position: absolute.

轻松地在里面对齐 span

Answer 2

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

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

updated fiddle

Answer 3

使用位置：绝对；而不是位置：相对；

Updated fiddle

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

Align text on top, right, bottom and left of image?

css

position