将跨度位置设置为中心

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

对absolute使用relative位置代替span，因为relative是默认位置。
然后只需使用position ing：）

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;

}

Answer 2

如果您可以在文本容器上设置固定宽度，这很容易，因此您可以将其移动到左侧的宽度的一半：

figure {
    position: relative;
    display: inline-block;
}
figure img {
    display: block;
}
.text {
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 50%;
    margin-left: -25%;
    padding: 5px;
    box-sizing: border-box;

    text-align: center;
    background: #fff;
    border: 1px solid #ccc; 
}