我正在尝试在图像的所有四个边上添加文本,但我无法让正确的文本正确对齐。右边的文字仍然在左边。
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;
}
最佳答案
你应该在你的图像周围添加包装器(现在它可以是 body),并给它 position: relative;
然后修改 .right 类:
.right {
display: inline-block;
background-color: #F00;
transform: rotate(90deg) translate(0, -50%);
position: absolute;
right: 0px;
top: 50%;
}
关于css - 在图像的顶部、右侧、底部和左侧对齐文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30964621/