0

编辑

我应该说我有多个图像要连续放置。mdk 提供的解决方案有效，但每个图像都出现在新行上。

我有描述和图像。我将描述覆盖在图像顶部。目前它在图像的底部左对齐。我想让描述在水平和垂直方向上居中对齐，但这样做有困难。使用的图像尺寸为 320 x 240。 

    <!-- image -->
        <div style="position: relative; left: 0; top: 0;">
    
    
    <a href="test.html"> <img src = "test.png" style="position: relative; top: 0; left: 0; width: 320px;"></a>
        
        <!-- description div -->
        <div class='description'>
            <!-- description content -->
            <p class='description_content'>This is the description of the image</p> 
            <!-- end description content -->
        </div>
        <!-- end description div -->
    
    </div>
    <!-- end image div -->

</div>
<!-- end wrapper div -->

css

div.wrapper{
    float:left; /* important */
    position:relative; /* important(so we can absolutely position the description div */ 
    padding: 5px;
}
div.description{
    position:absolute; /* absolute position (so we can position it where we want)*/
    bottom:0px; /* position will be on bottom */
    left:0px;
    /* styling bellow */
    background-color:black;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:18px;
    font-weight:900;
    color:white;
    opacity:0.75; /* transparency */
    filter:alpha(opacity=70); /* IE transparency */
}
p.description_content{
    padding:10px;
    margin:0px;
}
4

2 回答 2

0

如果图像始终大小相同，您可以使用 css top 属性而不是 bottom 例如

div.description{
                top:130px;
                text-align:center;}
于 2012-10-31T06:17:05.883 回答
0

这是一个解决方案，在同一行上显示两个图像，使用 display:table 在包装上， display:table-cell 在描述上。然后您可以使用 vertical-align: middle 将文本垂直居中。使用垂直对齐比设置顶部更好，因为将顶部设置为固定数量不会考虑描述中的多行。

这是一个工作小提琴：http: //jsfiddle.net/manishie/WSzE2/

HTML

<div class="wrapper">
    <a href="test.html"> <img height=240 width=320 src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYm7nE5wc8NLS4tY4zzx-kamyn656ziK8Ma9fnmZLDASZS6oya4g"></a>
    <div class='description'>
        <p class='description_content'>This is the description of the image</p> 
    </div>
</div>

<div class="wrapper">
    <a href="test.html"> <img height=240 width=320 src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYm7nE5wc8NLS4tY4zzx-kamyn656ziK8Ma9fnmZLDASZS6oya4g"></a>
    <div class='description'>
        <p class='description_content'>This is a multi line description of the image. abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc </p> 
    </div>
</div>

CSS

div.wrapper{
    float:left; /* important */
    display: table;
    width: 320px;
    height: 240px;
}
div.wrapper img {
    position: absolute;   
    z-index: -100;        
}

div.description{
    display: table-cell;
    vertical-align: middle; /* to vertically center */
    text-align: center; /* to horizontally center */
}
p.description_content{
    color: white;
    background: grey;
}
​
于 2012-10-31T06:54:40.387 回答