3

パーセンテージベースの数字があります。そのボックス内に、背景が透明な画像があります。コンテナの上部がコンテナから突き出るようにしながら、コンテナを水平に中央に配置し、コンテナの下部に固定する必要があります (画像を参照)。

絶対配置を使用して下部に固定し、上部から抜け出すことはできますが、中央に配置することはできません。画像の幅がわからず、コンテナの幅が柔軟な場合の方法はありますか? display:table は可能ですか?

例 私のコード:

<figure class="feature">
<a href="#">
    <img src="image" /> 
    <p class="title-bar">Caption</p>
</a>
</figure>

.figure { position: relative; width: 50%; }
.figure img { position: absolute; bottom: 0; }
4

3 に答える 3

3

このフィドルを確認してください。画像を中央に配置するには2つのバリエーションがあります

http://jsfiddle.net/GSKFD/

マークアップは同じ

<figure>
<a href="">
    <img src="http://placekitten.com/200/300" alt="" />
</a>
</figure>

両方の方法の一般的なスタイル

img{
        vertical-align: bottom;
    }

最初のバリアント

figure{
position: relative;
width: 50%;
height: 300px;
background: #cad;
}
figure a{
    position: absolute;
    bottom: 0;
    left: 50%;
}
figure img{
    position: relative;
    left: -50%;
}

そして2つ目

figure{
    position: relative;
    width: 50%;    
    height: 300px;
    background: #cad;
}
figure a{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    text-align: center;
}
于 2013-04-12T15:19:50.833 に答える