Question

有谁可以弄清楚为什么这个图像滑块上的标题不能正确对齐？我希望它与图像的长度相同。目前，左侧太长了。

此外，标题太短，因为图像淡入，但随后将其自身校正为适当的长度。关于如何解决这个问题的任何想法？

以下是该页面的网址：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;
}

Answer 1

left: 32px;
width:78%;

减小宽度，增加左边距

Answer 2

这是我能想到的：

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

我测试了它，上面的代码似乎已经对齐了标题。您可以根据需要更改padding-left和padding-right的值来进行更多实验。

Answer 3

我同意之前的两个答案，但我认为问题的根源在于图像本身。它们都有一个空白边缘，例如; http://homepages.uc.edu/~daniela8/slider/slider4/data1/images/frog.jpg

标题从图像的开头开始，但图像本身有填充。

图像滑块标题未正确对齐

3 个答案: