2015-01-30 5 views
0

업데이트 : 예, 텍스트 정렬 사용 : 포함 된 div의 센터가 트릭을 만들었습니다!왜 img 센터링을하지 않습니까?

나는 img이 센터링을하지 않는 이유에 관해서는 손해보고 있습니다.

다음은 CSS의 :

#add_next {  
    clear: both;  
    width: 79%; 
    margin-right: auto; 
    margin-left: auto; 
    margin-top: 20px; 
} 

.next_button { 
    height: 60px;  
    margin-top: 13px;  
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    -webkit-transition: all 0.1s;  
    transition: all 0.1s; 
} 

그리고 여기에 HTML 코드입니다 : 당신은 컨테이너 div에 이미지에 display:block 또는 text-align:center을 추가 할 수 있습니다

<div id="add_next"><a href=# ><img src="images/next button5.png" class="next_button" /></a></div> 

+0

'# add_next'에'text-align : center;'를 넣으려고 했습니까? – j08691

+0

div와 img에 테두리를 넣어 상자의 위치를 ​​확인합니다. 아마도 img는 가운데 맞춤되어 있지만 div는 이미지의 정확한 크기이므로 센터링이 보이지 않습니다. –

+0

다음은 현재와 미래의 문제를 해결하는 트릭입니다. 브라우저에서 페이지를 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"를 클릭하십시오. 창이 아래쪽에 열립니다. 코드의 다른 부분 위로 마우스를 가져 가서 확장하고 오른쪽 열을 검사하여 페이지의 다양한 부분의 CSS를 확인합니다. –

답변

1

에 정렬됩니다 있도록 이미지의 순간

인라인 요소입니다.

fiddle

1

. 당신이 부모 div 요소에 text-align:center;를 추가하는 경우, 그것을 중심 것입니다 기본 텍스트 정렬 (보통 왼쪽)

1

인라인 요소 (A, IMG)는 자동 여백을 사용하여 중앙에 수 없으며, 당신은 당신이 중심하려는 요소에 text-align: center;을 적용 할 수 없습니다.

#add_next에 text-align: center;을 추가해보세요.

관련 문제