양 옆의 텍스트 가운데에 텍스트를 가운데에 맞 춥니 다. (왼쪽 및 아래) CSS 전용

Question

이미지의 옆이나 옆쪽 (왼쪽/오른쪽 또는 위쪽/아래쪽)에 텍스트를 가운데에 배치하는 것은 매우 쉽지만 이미지의 왼쪽을 따라 텍스트 텍스트를 중심에 배치하고 하단을 따라 텍스트를 가운데에 배치해야합니다.

몇 가지 해결책을 찾아 보았지만 각각 하나의 텍스트 또는 다른 텍스트를 수동으로 센터링해야합니다. 아래의 솔루션에서는 아래쪽에 텍스트를 수평으로 가운데에 배치하려면 텍스트의 길이가 변경되도록 패딩이 필요하기 때문에 왼쪽에 세로 센터링을 수동으로 적용하기로했습니다.

자바 스크립트는 매우 쉽습니다.

element.style.paddingTop = (Img_Height/2 - Txt_Height/2); 

그러나 나는 순수 CSS 솔루션이 없다고 생각한다.

아래에서이 코드의 동일한 효과를 얻는 더 좋은 방법이 있습니까? 여기에 직접보기 : http://jsfiddle.net/Gamil/yteBY/

<div class="Preview"> 
    <p class="Preview" style="padding-top: 54px;">120 pixels high</p> 
    <ul class="Preview"> 
     <li><img alt="big preview" src="http://placehold.it/160x120" /></li> 
     <li>160 pixels wide</li> 
    </ul> 
</div> 
<div class="Preview" style="padding-top: 30px;margin-left: 30px;"> 
    <p class="Preview" style="padding-top: 23px;">60 pixels high</p> 
    <ul class="Preview"> 
     <li><img alt="big preview" src="http://placehold.it/80x60" /></li> 
     <li>80 pixels wide</li> 
    </ul> 
</div> 

CSS :

.Preview { 
    float: left; 
} 
ul.Preview > li { 
    list-style: none; 
    text-align:center; 
} 

Answer 1

Horiztonal alignement가 수직 정렬을위한 조금 복잡합니다, 쉬운 사실이다. Here is a good article on vertical alignment

그래서 문제와 직결 여기에 첫 번째 솔루션 :이 솔루션은 CSS를 같이 완벽하지 JSBIN 내가 할 : 텍스트 가 왼쪽에서 50 %를 시작한다는 것을 의미

.textC{ 
    position:absolute; 
    top:50%; 
    left:50%; 
} 

및 상단. 당신이 정확히 원하는 것 (내가 이해 한 것으로부터)이 아닙니다.

작은 자바 스크립트를 사용하면 텍스트의 크기를 가져 와서 그림의 중앙에 정확하게 바꿀 수 있습니다. See the JSBIN solution with javascript

편집 : 여기에 새로운 솔루션은 CSS를 사용한다 : 나는

.block1{ 
    #position: absolute; 
    display: table-cell; 
    vertical-align: middle; 
    top: 50%; 
    left: 50%; 
} 

.block2{ 
    #position: relative; 
    display: block; 
    bottom: 50%; 
    right: 50%; 
    margin:auto; 
} 

는 기본적으로 위치로 #를 추가 CSS 코드의 스 니펫을 설명 fiddle

을 오브젝트의 중심을 선택 왼쪽 위 모서리 대신.

this website에 감사드립니다. 내게 당신의 문제에 대한 올바른 해결책을 암시했습니다!