2012-07-04 4 views
1

마지막 행에 이미지 단추 옆에 텍스트가 표시되는이 간단한 테이블이 있습니다. 이것은 IE7을 제외한 다른 브라우저에서도 잘 작동합니다. CSS 파일에서IE7 테이블 셀의 단추 옆에 텍스트 정렬

<table> 
    <tr> 
     <td>Some header</td> 
     <td>Some other header</td> 
    </tr>    
    <tr> 
     <td colspan="2" class="infoRow">Info: 
     <input type="image" class="infoButton" src="Images/down_arrow.png" /></td> 
    </tr> 
</table> 

:

.infoButton 
{ 
    float: right; 
    padding: 0; 
    margin-left: 20px; 
} 

.infoRow 
{ 
    text-align: right; 
} 

IE7은 모든 방법 테이블 셀의 오른쪽 이미지 버튼에 텍스트를 표시는 아래도 오른쪽으로 정렬됩니다. 다른 브라우저에서 제대로 작동하는 이미지 버튼의 왼쪽에있는 "정보 :"텍스트를 표시하고 싶습니다.

답변

2

플로트를 제거하면 좋을 것 같습니다.

+0

을 위해 작동 할 라벨 태그 <label>info<label/>에 귀하의 정보 텍스트를 넣어하는 것이 좋습니다! 고마워. 그러나 이제 텍스트는 이미지 버튼 옆에 세로로 가운데에 정렬되지 않습니다. 나는 이미지의 수직 중심에 텍스트를 놓는 "vertical-align : top"을 시도했다. Chrome에서는 작동하지만 IE에서는 작동하지 않습니다. 젠장 –

+0

@ OliverNilsen, [this] (http://css-tricks.com/centering-in-the-unknown/)을보십시오. –

+0

'td'에'세로 정렬 : 중간 '이 효과가 있다고 생각합니다. – powerbuoy

0

style="vertical-align:middle;"을 입력에 적용하고 (float을 제거하면) IE에서 작동합니다.

나는 IE의 모든 버전에서 이것을 시도하고 이제까지 단점이 있으며,이 코드는 아래를 볼 것에 대한 이유를 잘 모르겠어요 그래서 작동합니다

스타일 : .infoButton {vertical-align:middle;padding:0;margin-left:20px;} label {vertical-align:middle;} .infoRow{text-align:right;}

html : <td class="infoRow" valign="middle"><label>Info:</label><input type="image" class="infoButton" src="Images/down_arrow.png" /></td>

+0

내 텍스트는 여전히 이미지의 왼쪽 중앙에 있지 않습니다. –

+0

흠, IE7에서 저에게 잘 돌아갔습니다. 왜 colspan = "2"를 사용했는지 이유가 있습니까? 텍스트와 이미지를 각각''과'valign = "middle"'으로 놓으면 작동 할 것입니다. 예 :' 정보 : ' – JoProte

+0

이미 여러 행이있는 테이블이 있습니다. 마지막 행은 27px x 27px의 "Info"레이블과 약간의 이미지를 넣고 싶습니다. 모든 것을 오른쪽 정렬하고 Info 레이블을 이미지의 왼쪽 중앙에 배치하려면이 모든 것을 한 줄에 배치해야합니다. 간단하게 들리지만, 나는 그것을 알아낼 수 없다. –

0

내 IE7에서 왼쪽의 텍스트와 오른쪽의 버튼이 표시됩니다.

"white-space : nowrap"스타일을 td에 추가 할 수 있습니다.

+0

변경된 내용이 없습니다./ –

0

가이 일을 IE7

+0

나는 이것을 시도했습니다. Chrome에서 잘 작동합니다. 하지만 IE가 아닙니다. 예수님 나는 IE가 싫다. –

관련 문제