Question

Trying to add a centered caption over an image, almost there. see:http://cssdesk.com/2wreQ But I want and can t get the text paragraph (p.wp-caption-text to) be centered. Can t get it done and hopefully someone can point me in the right direction to do it with css or jquery.

非常感谢任何帮助。

Answer 1

你让它变得比需要的复杂多了 JQuery根本不必要

< a href=> "http://csdesk.com/jegSJ" rel="nofollow" > 我的行动建议。我删除了 .wp-caption 元素的内线宽度,因为这不是一个伟大的实践,它使事情复杂化。你不需要任何 z-index 值,而 position: 绝对 位置实际上造成了你的问题,因为它没有定义宽度。要将标题文本置于图像中, 标题文本元素需要拥有图像的全部宽度。您可以简单地添加 width: 140px; 到 .wpp-caption- text 来完成这个任务, 但随后你就会遇到其他问题。



删除 < code> 位置: 绝对; , 段落可以追溯到使用其可用的全部宽度( 在应用边距后), 以及  text- align: central;  属性适用于 .wp- caption  的工作。 对边距和垫线的修改主要是为了简化 CSS 安保部, 使其更容易工作, 但是它们还应该修正一些浏览器问题, 您可能稍后会遇到的 。 我还应用了一些非争议格式化。 I. e. I., 我重新排序了属性, 删除了重复内容, 添加了间距 。

HTML 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;
}

Answer 2

嘿,我想你应该这个

在 cs 中添加一个属性

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

并替换此 cs 中的此 css

#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

I assume u have fixed width of 160px of attachment_24. Add this to your css.

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

Answer 4

Thanks everybody for helping me in right direction.. This is what I had in mind: http://cssdesk.com/tVpxK and thanks to your help I got it working..

友情链接