레이블 가운데 맞추기

-2

나는 div의 텍스트와 절대 위치를 가지고 있습니다. 왼쪽이나 오른쪽을 설정할 수는 있지만 중심을 설정하는 방법이 있으므로 Div의 텍스트는 양방향으로 확장됩니다.레이블 가운데 맞추기

지금까지 나는 여분의 길이가 긴 div을 만들고 내부 텍스트를 가운데에 넣는 것에 대해서만 생각할 수있었습니다.

2011-09-06 Alena

페이지의 div 또는 가운데 div에 가운데에 텍스트를 배치 하시겠습니까? –

및 귀하의 이야기에 라벨이 어디에 표시됩니까? –

div의 위치를 실제 너비를 모른 채 중심 좌표로 정의하고 싶습니다! – Alena

div가 절대적으로 배치되면 left 속성을 중앙에 오도록 설정할 수 있습니다.

예 :

HTML :

<div class="outer"> 
    <div class="inner">Some text...</div> 
</div>

CSS :

.outer { 
    position: relative; 
    width: 900px; 
} 
.inner { 
    position: absolute; 
    width: 500px; 
    top: 0; 
    left: 200px; 
}

당신이 내부 요소의 폭을 모르는 경우 ' 자바 스크립트에 의존해야합니다.

여기에 jQuery를 사용하여 예입니다 :

var $el = $('.inner'); 

$el.css('left', 
    ($el.parent().width() - $el.width())/2 
);

여기에 바이올린입니다 : http://jsfiddle.net/aa93G/. .inner 안에있는 텍스트를 가지고 놀면 텍스트가 가운데에 머물러있게됩니다.

2011-09-06 17:56:15

@downvoter :이 솔루션의 문제점은 무엇입니까? –

글쎄, 내가 div의 중심의 좌표, 왼쪽 경계의 좌표 및 텍스트의 너비는 알 수 없다. – Alena

@ Alena : 나는 너를 여기에서 따르고 있는지 잘 모르겠다. http://jsFiddle.com에서 테스트 사례를 만들 수 있습니까? –

내부 텍스트와 인라인 요소를 중앙 집중화하려면 부모 요소에 text-align: center을 사용하십시오.
블록 요소를 다루는 경우 요소 자체에 margin: auto을 사용해야합니다. 하지만 먼저 요소의 너비를 설정해야합니다. 그렇지 않으면 부모의 전체 너비를 차지하게됩니다.

2011-09-06 18:25:51

"position : absolute"가 있으므로 기본적으로 부모 요소가 없습니다. 그리고 난 실제 폭 (div의 텍스트)을 모른다. – Alena

답변