부모 div 크기에 관계없이 부모 div의 중간에 단락을 가운데에 넣으십시오.

Question

정말 어려움을 겪고 있습니다. 이미지 위에 캡션이있는 여러 이미지가 있습니다.

나는 내가 영리 JQuery와 약간의 것 추정 수평 및 수직 관계없이 이미지

의 크기의 캡션을 중심하려고하지만 난 거기에 아무것도 찾을 수없는 것.

은 아래 페이지

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

감사의 URL,

토

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

길이가 다른 캡션이있는 경우 그런 다음 이미지 크기를 기준으로 left 및 top 속성을 동적으로 설정하려면 jQuery가 필요합니다.

Answer 3

앉아,
<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> 

는이 같은 일이 일 전망이다. 그것으로 놀아 라. 그러나 나는 그것이 할 것이다라고 생각한다.