图像滑块标题未正确对齐答案

【问题标题】：image slider title not properly aligned图像滑块标题未正确对齐
【发布时间】：2012-09-01 20:09:50
【问题描述】：

谁能弄清楚为什么此图像滑块上的标题无法正确对齐？我希望它与图像的长度相同。目前，左边太长了。

此外，由于图像淡入，标题太短，但随后会自行修正为适当的长度。有关如何解决此问题的任何想法？

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

【问题讨论】：

标签： css image slider title

【解决方案1】：

left: 32px;
width:78%;

缩小宽度，增加左边距

【讨论】：

感谢@Kedar 的快速回复！如果我减小宽度，它会改变整个图像，使其变小，这不是我想要的。此外，当我增加左边距时，标题会移动，使其在两侧与图像重叠。问题，我认为是@John_C 所说的关于图像填充的内容，但我不知道要改变什么才能使它工作。你知道吗？

【解决方案2】：

这是我能想到的：

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

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

【讨论】：

我将上面的代码添加到我的css中，但它没有影响任何东西。你能告诉我你把它放在哪里以及你是否更改或删除了任何其他代码？谢谢:-)
对不起，回复晚了，我不知道你那边出了什么问题，在我这边，它似乎有效。您使用的是哪个浏览器？我在 Chrome 上。做一件事，在 mediafire 或其他服务上公开上传源文件。
感谢@Sean Vaughn 的评论。我正在使用 Firefox 和 Safari 来测试它。您是否将上面的代码添加到 css 中或将其放置在上面其他两个 div id' 之一的位置？谢谢！
我在谷歌浏览器的调试控制台中添加了css代码。没有其他方法可以编辑源文件，因为它们在您的服务器上，这就是我要求您公开上传的原因。

【解决方案3】：

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

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

【讨论】：

是的，我明白这一点，但我已经尝试在 css 上为图像的容器和标题添加和删除填充，但都没有影响标题问题。你知道我应该怎么做来改变图像周围的填充吗？感谢您迄今为止的帮助！
嗨，很抱歉没有早点回复。我想我昨天的回答并不完全清楚。我的意思是你应该使用一些图像编辑软件（photoshop、paint 或类似软件）来编辑图像，以去除它们周围的空白。如果这不可能，添加 'width: 620px;left: 160px;'到 .ws-title 应该修复它，但它不是最好的解决方案，因为它取决于图像的格式。样式需要内联添加，因为这是现有样式所在的位置。