jquery - 将跨度位置设置为中心

Question

我有多个div用image和一个 spam html 是:

<div style="background:red">
    <img src="http://s21.postimg.org/qku195lvr/graphics_dept.jpg" width="400px" />
   <span class="text">Center Text</span>      
</div>

<div style="background:red">
    <img src="http://s21.postimg.org/qku195lvr/graphics_dept.jpg" width="300px" />
   <span class="text">Center Text</span>      
</div>

<div style="background:red">
    <img src="http://s21.postimg.org/qku195lvr/graphics_dept.jpg" width="500px" />
   <span class="text">Center Text</span>      
</div>

jsfiddel 是 http://jsfiddle.net/Azb99/3/

我尝试设置 <span class="text">Center Text</span>图像和图像中心的文本是动态大小的。

我试试这个 CSS:

.text {
position:relative;
top:-50%;
left:50%;
text-align:center;
background:#fff;
padding:5px;
border:1px solid #ccc; 
}

如何设置Center Text文本到图像的中心和中间？

参见 http://jsfiddle.net/Azb99/8/帮助更多..

Answer 1

span 使用absolute 位置而不是relative 因为relative 是默认位置。
然后只需使用 positioning :)

working demo

.text {
    position:absolute;
    text-align:center;
    background:#fff;
    left :25%;
    top:50%;
    padding:5px;
    border:1px solid #ccc;
    color:black;
}

编辑

要在每张图片上显示，这应该是您的标记:

demo

div{
    position:relative; /* this is important as its the parent and needs to have a position*/
}
img{
    width:100%; /* make image take full width*/
    height:100%; /* or auto, if you want to maintain aspect ratio */
    position:relative;
    z-index:9; /* to show one over other, lesser z-index will be below */
}
.text {
    position:absolute;
    z-index:99;
    text-align:center;
    background:#fff;
    left :50%;
    top:50%;
    padding:5px;
    border:1px solid #ccc;
    color:black;
}

编辑 2

这是您的最终结果，应该可以让您继续前进!! :)

demo

div {
    position:relative;
    display:inline-block;
}
img {
    position:relative;
    z-index:9;
}
.text {
    position:absolute;
    vertical-align:middle;
    z-index:99;
    text-align:center;
    background:#fff;
    min-height:20px; /* added this */
    top: calc(50% - 20px); /* added this */
    width:100px; /* added this */
    word-break:break-all; /* added this */
    left:0;
    right:0;
    margin : 0 auto;
    padding:5px;
    border:1px solid #ccc;
    color:black;

}