无论父母div的大小居中父母div的中间段

Question

我有一个真正的困难。我有一些图片的顶部有一个标题。

我试图水平和垂直不顾形象

的尺寸居中标题我相信这将是聪明的jQuery一点点，但我似乎无法找到任何东西在那里。

下面是页面

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

感谢网址，

周六

Answer 1

我用这个溶液

$('.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'; 

}）;

Answer 2

做最简单的事情就是增加一个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 3

sat，
如果您将<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> 

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