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のトッププロパティを使用できます

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

これは、ラッパーに display:table を使用し、説明に display:table-cell を使用して、同じ行に 2 つの画像を表示するソリューションです。次に、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 に答える