如何在图像上对齐文本？我尝试使用绝对位置，但它在图像下方，因为图像处于绝对位置。文本必须在框中的图像下方，就像这张图片http://s8.postimage.org/tsrcam791/image.png或文本必须漂浮在图像上
css
.image_stack img { /* css style for photo stack */
border: none;
text-decoration: none;
position: absolute;
margin-left:0px;
width: 170px;
height: 160px;
}
.image_stack { /* css style for photo stack */
width: 200px;
position: relative;
padding-left:20px;
margin-bottom:40px;
float:left;
}
.image_stack img { /* css style for photo stack */
position: absolute;
border: 4px solid #FFF;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
z-index: 9999;
/* Firefox */
-moz-transition: all 0.2s ease;
/* WebKit */
-webkit-transition: all 0.2s ease;
/* Opera */
-o-transition: all 0.2s ease;
/* Standard */
transition: all 0.2s ease;
}
.image_stack #photo1 { /* position of last photo in the stack */
top: 8px;
left: 108px;
}
.image_stack #photo2 {/* position of middle photo in the stack */
top: 6px;
left: 104px;
}
.image_stack #photo3 {/* position of first photo at the top in the stack */
top: 4px;
left: 100px;
right: 100px;
}
.image_stack .rotate1 {/* rotate last image 15 degrees to the right */
-webkit-transform: rotate(15deg); /* safari and chrome */
-moz-transform: rotate(15deg);/*firefox browsers */
transform: rotate(15deg);/*other */
-ms-transform:rotate(15deg); /* Internet Explorer 9 */
-o-transform:rotate(15deg); /* Opera */
}
.image_stack .rotate2 {/* css not used*/
-webkit-transform: rotate(0deg); /* safari and chrome */
-moz-transform: rotate(0deg);/*firefox browsers */
transform: rotate(0deg);/*other */
-ms-transform:rotate(0deg); /* Internet Explorer 9 */
-o-transform:rotate(0deg); /* Opera */
}
.image_stack .rotate3 {/*rotate first image 15 degrees to the left*/
-webkit-transform: rotate(-15deg); /* safari and chrome */
-moz-transform: rotate(-15deg); /*firefox browsers */
transform: rotate(-15deg);/*other */
-ms-transform:rotate(-15deg); /* Internet Explorer 9 */
-o-transform:rotate(-15deg); /* Opera */
cursor: pointer;
}
<div class="image_stack" style="margin-left:0px;" >
<img id="photo1" class="stackphotos" src="photos/2.jpg" >
<img id="photo2" class="stackphotos" src="photos/3.jpg" >
<img id="photo3" class="stackphotos" src="photos/1.jpg" >
<div style="position:absolute;left:150px;top:130px;display:block;background:#eee;width:180px;"> text</div>
</div>
<div class="image_stack"style="margin-left:0px;" >
<img id="photo1" class="stackphotos" src="photos/2.jpg" >
<img id="photo2" class="stackphotos" src="photos/3.jpg" >
<img id="photo3" class="stackphotos" src="photos/1.jpg" >
</div>
<div class="image_stack"style="margin-left:0px;" >
<img id="photo1" class="stackphotos" src="photos/2.jpg" >
<img id="photo2" class="stackphotos" src="photos/3.jpg" >
<img id="photo3" class="stackphotos" src="photos/1.jpg" >
</div>
</div>