CSS 텍스트가

가 어떻게 다음에 텍스트를 중심으로 수 (미안 CSS에 새로운 해요) :CSS 텍스트가

alt text

CSS :

suggestion_active { 
    background-image: url(../images/suggestion_active.jpg); 
    background-repeat:no-repeat; 
    position:inherit; 
    float:inherit; 
    width: 100px; 
    height: 36px; 
} 

suggestion_active_text { 
    possition: absolute; 
    font-family: "Lucida Grande", Tahoma; 
    font-size: 12px; 
    font-weight: lighter; 
    text-align: center; 
    color:#000; 
    vertical-align: middle; 
    padding:0px; 
}

HTML :

<suggestion_active><suggestion_active_text>1</suggestion_active_text></suggestion_active>

또한이 방법을 사용하는 것이 가장 좋습니다.

출처

2010-11-21 Lukas Šalkauskas

Harmen의 응답 작품을하지만, 자신의 html 태그를 만들고 있습니까? –

text-align: center;을 설정하면 텍스트 가운데에 텍스트가 가운데에 맞춰 지도록 설정하고 line-height: [heightofbox];을 텍스트 가운데에 세로로 배치 할 수 있습니다.

다음은 잘못된 HTML 요소와 작업하는 경우, 당신은 블록 요소로 설정해야하는

참고 간단한 example입니다.

는 배경 이미지와 하나 개의 사업부를 가지고 ..

customEl { 
    display: block; 
    ... 
}

출처

2010-11-21 20:01:36 Harmen

@harmeen, 나는 타이핑과 formating에 천천히 ... :) 내 대답은 또한 올바르게 작동해야합니다. – kobe

가로로 정렬하지 않습니다 (적어도 FF 3.6에서는 아님) - 그는 이미 텍스트 정렬 : 센터를 가지고 있습니다 ... –

@ 내 div 코드에서 형식을 사용하지 않았으므로 출력으로 1, 그래서 그 agian을 편집해야합니다. – kobe

당신은 suggestion_active_text 제거 할 수 있습니다 그래서,이 트릭을 할해야합니다. 그 안에 div이

<div style="text-align:center"> 1 </div>

그것이

출처

2010-11-21 20:03:40 kobe

@Lukas, 텍스트 정렬 센터가 텍스트에서 작동합니다. 이제이 한 div의 배경 이미지를 줄 수 있습니다. 두 개를 가질 필요가 없습니다. – kobe

이 태그의 모두에 다음을 추가하고 트릭해야 위 그게 전부에 대한 배경 이미지 제공과 같이 수행

display: block; 
width:100px;

출처

2010-11-21 20:05:01

음,별로 없습니다. – Marko

음 ... 실제 html 파일 에서처럼 여기에서 실제로 테스트하고 있습니다. 지금까지 OP 코드와 결합하여 작동하는 유일한 코드입니다 ... 그래, 정말 ... –

아직도, 그렇지 않습니다. 'vertical-align'은 모든 브라우저에서 작동하지 않습니다. 텍스트 전용이므로'line-height'를 설정하는 것이 훨씬 더 우아합니다. – Harmen

CSS 텍스트가

답변

관련 문제