1

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

非常感谢任何帮助。

4

4 回答 4

3

你让它变得比它需要的更复杂。jQuery 完全没有必要。

我的建议付诸行动。我已经删除了.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;
}
于 2012-05-28T07:14:00.903 回答
0

我假设您的附件_24 的固定宽度为 160 像素。将此添加到您的 CSS 中。

p.wp-caption-text{
    width:140px
}
于 2012-05-28T05:43:26.590 回答
0

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

于 2012-05-28T10:26:43.337 回答
0

嘿，我想你应该这个

在你的 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/

于 2012-05-28T05:37:37.230 回答