텍스트가 가운데에 있지 않습니까?

Question

DIV의 가운데에 텍스트가 정렬되지 않는 문제가 있습니다.

이 나는 ​​시도했다 :

text-align:center; 

및

width:225px; /*width of div*/ 
margin:0px auto; 

하고 중앙하지 않습니다.

다음은 DIV 용 HTML 및 CSS입니다.

HTML

<div id="past"> 
<h3><a href="/artistphotos/">View Past Messages</a></h3> 
</div> 

CSS 내가 페이지를 구축하는 동안 인라인 스타일을 사용하여 텍스트 정렬 및 여백을 적용했습니다

#past{ 
    position:absolute; 
    left:0; 
    top:363px; 
    width:225px; 
    height:50px; 
    background-image:url('../images/members/roundedbox.png'); 
    z-index:10; 
} 

. div, h3 및 요소에 적용했는데 어떤 요소에서도 작동하지 않습니다.

무엇이 여기에 있습니까? 감사! (머리글과 바닥 글 요소 제외)

<div class="center over_all_under"> 
</div> 
<!--[if !IE]>start intro<![endif]--> 
<div class="center"> 
</div> 
<!--[if !IE]>end intro<![endif]--> 
<!--[if !IE]>strat main<![endif]--> 
<div class="wrap_fullwidth" id="main"> 
<div class="center"> 
<br /> 
<div id="homepage"> 
    <div id="homepage-main"> 
     <div id="homepage-main-item" class="full_shadow>{module_adrotator,5622} 
     <div id="past"> 
      <h3><a href="/artistphotos/">View Past Messages</a></h3> 
     </div> 

이것은 많은 코드 뒤에 : 여기

는 HTML 코드입니다. 여기에 붙여 넣을 수는 있지만 읽기가 어렵 기 때문에 div 위의 코드 만 포함 시켰습니다.

Answer 1

text-align:center; 나를 위해 잘 작동 : http://jsfiddle.net/mrchief/bhtZe/

#past { 
    position:relative; 
    left:0; 
    top:363px; 
    width:225px; 
    height:50px; 
    background-image:url('../images/members/roundedbox.png'); 
    z-index:10; 
    text-align:center;  
} 

업데이트 : 그 (절대적 위치됩니다) 중앙 정렬에서 HREF를 방해로을 페이지에보고 한 후, #past h3에서 position: absolute를 제거합니다.

div 너비가 작 으면 부모 배경으로 가운데에 놓으려는 경우 #past width에서 100%으로 설정하십시오.

Answer 2

사용자가 있기 때문에 그것은 position:absolute입니다. 절대적으로 배치 된 요소는 흐름에서 벗어 났고 margin은 아무 의미도 없습니다.

너비가 100% 인 다른 DIV과 완전히 다른 위치에 이미지를 배치하여 이미지의 중앙에 놓으십시오. 그런 다음 #past을 relative 위치에두고 마진 트릭을 사용합니다.

가 여기에 작동 예 : 당신 #past CSS 규칙의 내부 http://jsfiddle.net/c5xaW/

Answer 3

이 추가 : 그것은 작동해야

text-align: center; 

. 나는 그것을 시도했다 here. 규칙을 추가 및 제거하고 어떤 일이 발생하는지 확인하십시오.