Question

我遇到了一个真正的困难。我有一些图像顶部带有标题的图像。

无论图像大小如何，我都试图水平和垂直居中标题

我认为这将是一个聪明的Jquery，但我似乎无法找到任何东西。

以下是页面的网址

http://satbulsara.com/luke-irwin/?page_id=175

谢谢，

周六

Answer 1

最简单的方法是添加left和width属性以包含文本。但是，这确实假设文本的长度有限。

#rugs #content .rugsAll div p {
    color: #FFFFFF;
    font-size: 24px;
    left: 35%;
    position: absolute;
    text-align: center;
    z-index: 4;
    top: 40%;
    width: 20%;
}

如果您有不同长度的字幕。然后，您将需要jQuery动态设置left和top属性，使其根据图像大小居中。

Answer 2

坐着，
如果您将<p>课程的宽度设为100％，则text-align:center会将文字水平放置在中心位置。

垂直对齐比较棘手。您应该将<p>包装在容器中，vertical-align:middle容器。

CSS：

.container {
    width: 100%;
    vertical-align:middle;
}

p .wp-caption-text {
     position: relative;
     display: block;
     z-index: 40;
     font-size: 24px;
     text-align: center;
     width: 100%;
     color: #fff;

}

<强> HTML

 <div id="attachment_249" class="wp-caption alignnone" style="width: 319px">
      <img class="animal new" title="Rug-12" src="http://satbulsara.com/luke-irwin/wp-content/uploads/2011/05/Rug-121.jpg" alt="" width="309" height="453" />
      <div class="container">
          <p class="wp-caption-text">
          testing 8
          </p>
      </div>
  </div>

我相信这样的事情会起作用。玩弄它，但我认为它会这样做。

Answer 3

我使用了这个解决方案

$('.wp-caption-text').each(function() {
this.style.position = 'absolute';
this.style.top = $(this).parent().height()/2 + 'px';
this.style.marginTop = -$(this).height()/2 + 'px';
this.style.left = ($(this).parent().width() - $(this).width())/2 + 'px';

}）;

无论父div的大小如何，都将父段div中间的段落居中

3 个答案: