텍스트와 배경 이미지 정렬

Question

누군가가이 작은 문제를 진단하는 데 도움을 줄 수는 없습니다. 여러 번 해본 배경 이미지 아래에 텍스트를 가운데 맞춤하려고했습니다. 이유는 무엇입니까? 노력의 시간 ..

그것은 바로 여기 바닥 글에 굴러 로고입니다 : http://www.inside-guides.co.uk/brentwood/pages/index.html

그냥 아래 이미지의 왼쪽에 '의 회원'을 볼 수 있듯이. 여기에 테스트를위한 인라인 코드는 : 그것은 텍스트의로 그 폭이 동일하기 때문에

 <div style="margin-right:15px;position:relative;float:right;width:88px;height:100px;background:url(/images/Structure/chamber-logo.png) no-repeat;background-position:50% 0"><span style="font-size:12px;position:absolute;bottom:0;margin:0 auto;text-align:center;">Member Of</span></div> 

Answer 1

:

http://jsfiddle.net/audetwebdesign/svXkt/

내가 몇 가지 배경 색상, 일부 국경을 추가의 폭을 과장 :이 패턴의 나의 버전은

여기

<div style="font-size:12px; position:absolute;bottom:0; width:100%; text-align: center;">Member Of</div></div> 

Answer 2

text-align:center이 기간에 아무것도하지 않는다. 그 스타일을 바깥 쪽 div에 넣으십시오.

당신은 사업부로 범위를 변경할 수 있습니다

Answer 3

입니다 로고가 들어있는 요소가 가운데에 있음을 나타냅니다.

(1) 사용자는background-positioncenter 속성의 값을 이용하여 배경 이미지의 중심있다. 이는 특정 로고의 크기와 일치하도록 컨테이너의 크기를 조정하지 않아도되는 좋은 방법입니다.

2 텍스트 라벨/자막 쉽게 text-align: center;을 사용하여 중심 그러나 이것은 span 소자 스타일링 때에 따라서 display: block를 사용하여, 단지 블록 레벨 요소에 작동한다.

(3)Inherit 로고의 상위 컨테이너에서 스팬 너비 너비를 지정해야합니다.

물론 SpliFF가 제안한 것처럼 상단에 패딩을 추가하여 텍스트 인라인 요소를 아래로 이동 한 다음 텍스트 맞춤을 사용할 수 있습니다.

페이지에 일련의 로고가있는 경우이 패턴을 사용하는 경향이 있습니다 (예 : 스폰서 페이지).