Question

尝试在图像上添加居中标题，几乎就在那里。见：http://cssdesk.com/2wreQ 但我希望并且不能将文本段落（p.wp-caption-text to）置于中心位置。无法完成它，希望有人可以指出我正确的方向用css或jquery来做。

非常感谢任何帮助。

Answer 1

你使它变得比它需要的更复杂。并且jQuery根本不是必需的。

My suggestion in action.我删除了.wp-caption元素的内联宽度，因为这不是一个很好的做法，这使事情变得复杂。您不应该需要任何z-index值，而position: absolute实际上是在创建您的问题，因为它没有定义的宽度。要使标题文本以图像为中心，标题文本元素需要拥有图像的整个宽度。你可以通过简单地将width: 140px;添加到.wp-caption-text来完成此操作，但最后你会遇到其他问题。

通过删除position: absolute;，段落将返回使用可用的全部宽度（应用边距后），并且应用于text-align: center;的{{1}}属性可以完成其工作。边距和填充的更改主要是为了简化CSS并使其更易于使用，但它们还应该修复一些您可能会在以后遇到的浏览器问题。我还应用了一些无争议的格式。即，我重新排序了属性，删除了重复项，增加了间距。

HTML

.wp-caption

CSS

<div id="content">
<div id="attachment_24" class="wp-caption alignnone"><a href="http://zoekmachineoptimalisatielab.nl/wp-content/uploads/2012/05/Koala.jpg"><img class="size-thumbnail wp-image-24" title="Koala" src="http://zoekmachineoptimalisatielab.nl/wp-content/uploads/2012/05/Koala-150x150.jpg" alt="" width="150" height="150" /></a><p class="wp-caption-text">Koala caption</p></div>
</div><!-- .entry-content -->

Answer 2

嘿，我认为你应该这个

在你的css中添加一个属性

#content .wp-caption {
position:relative;
}

并将此css **#content .wp-caption p.wp-caption-text**替换为此

#content .wp-caption p.wp-caption-text {
    background-color: #FFFFFF;
    border: 1px solid #CACACA;
    bottom: 24px;
    color: #888888;
    font-size: 12px;
    font-weight: bold;
    left: 0;
    margin: 0 9px;
    padding: 1px 4px;
    position: absolute;
    right: 0;
    z-index: 9999;
}

现场演示http://jsfiddle.net/seK84/

Answer 3

我假设你的附件固定宽度为160px。将此添加到您的CSS。

p.wp-caption-text{
    width:140px
}

Answer 4

感谢大家帮助我正确的方向.. 这就是我的想法：http://cssdesk.com/tVpxK并且感谢你的帮助，我得到了它的工作......

显示图像标题居中于图像和中心与css或jquery可能吗？

4 个答案: