jquery - 显示以图像为中心的图像标题，并可以使用 css 或 jquery 居中吗？

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;应用于 .wp-caption 的属性完成其工作。对边距和填充的更改主要是为了简化 CSS 并使其更易于使用，但它们还应该解决您以后可能会遇到的一些浏览器问题。我还应用了一些无争议的格式。即，我重新排序了属性，删除了重复项，添加了间距。

HTML

<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 -->

CSS

#content .wp-caption {
  background: #F1F1F1;
  line-height: 18px;
  margin-bottom: 20px;
  overflow: hidden;
  padding: 9px 0;
  text-align: center;
  width: 168px;
}
#content .wp-caption a {
  display: block;
  margin: 0 9px;
}
#content .wp-caption-text {
  background-color: #FFFFFF;
  border: 1px solid #CACACA;
  color: #888888;
  font-size: 12px;
  font-weight: bold;
  margin: -12px 9px 0;
  padding: 1px 4px;
  position: relative;
}