1

この画像スライダーのタイトルが正しく整列しない理由を誰か理解できますか? 画像と同じ長さにしてほしいです。現在、左側が長すぎます。

また、画像がフェードインするため、タイトルが短すぎますが、適切な長さに修正されます。これを修正する方法についてのアイデアはありますか?

このページの URL は次のとおりです: http://homepages.uc.edu/~daniela8/slider/slider4/slider4.html

タイトルのcssは次のとおりです。

#wowslider-container1 .ws-title{
position: absolute;
bottom:0;
left: 32px;
margin-right:5px;
z-index: 50;
background-color:#000000;
color:#FFFFFF;
padding:10px 1%;
width:78%;
font-family: "Myriad Pro", Arial, "Franklin Gothic Medium";
font-size: 14px;
opacity:0.55;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=55); 
}
#wowslider-container1 .ws-title div{
padding-top:5px;
font-size: 12px;
}
4

3 に答える 3

0 
left: 32px;
width:78%;

幅を減らし、左マージンを増やす

于 2012-09-07T23:42:53.543 に答える
0

これは私が思いつくことができるものです:

.ws-title {
    display: block;
    padding-left: 54px;
    padding-right: 54px;
    position: absolute;
}

テストしたところ、上記のコードはキャプションを揃えたようです。padding-left必要に応じてとの値を変更して、さらに実験することができpadding-rightます。

于 2012-09-08T00:12:17.597 に答える
0

以前の2つの回答には同意しますが、問題は画像自体に根ざしていると思います。それらはすべて空白の左マージンを持っています。 http://homepages.uc.edu/~daniela8/slider/slider4/data1/images/frog.jpg

タイトルは画像の先頭から始まりますが、画像自体にパディングがあります。

于 2012-09-08T00:14:17.740 に答える