동일한 요소에 가운데 맞춤 텍스트와 오른쪽 맞춤 이미지를 표시하려면 어떻게해야합니까?

Question

나는 중앙에 배치하는 그들의 텍스트 일부 th 요소를 가지고 있고 또한 이미지를 포함 :

위/아래 그래픽은 별도의 이미지입니다 화살표.

내 질문은 텍스트를 가운데에 유지하면서 th 요소의 오른쪽으로 그 이미지를 배치하는 가장 간단하고 신뢰할 수있는 방법은 무엇입니까?

합리적으로 간단한 방법이 있다면 jQuery/JavaScript를 사용할 수 있습니다.

주의 사항 : 업/다운 그래픽은 헤더 배경의 일부가 아닌 별도의 이미지 여야합니다.

 <th> 
      Title 
      <img src='/images/sort_unsorted.jpg' /> 
     </th> 

Answer 1

위치를 잘 잡으려면 (배경 이미지를 사용하지 않으려는 경우) DIV와 같은 블록 수준 요소로 내용을 래핑해야합니다. 표 셀의 하위 요소에는 position: absolute;을 사용할 수 없습니다.

그래서,이 같은 것을 권장합니다

이

HTML :

<table cellpadding="0" cellspacing="0"> 
    <thead> 
     <th> 
      <div class="positioning"> 
       Left 
       <div class="img">&nbsp;</div> 
      </div> 
     </th> 
     <th> 
      <div class="positioning"> 
       Center 
       <div class="img">&nbsp;</div> 
      </div> 
     </th> 
     <th> 
      <div class="positioning"> 
       Right 
       <div class="img">&nbsp;</div> 
      </div> 
     </th> 
    </thead> 
    <tbody> 
     <td>Left</td> 
     <td>Center</td> 
     <td>Right</td> 
    </tbody> 
</table> 

이 <div class="img">&nbsp;</div> 단지 12 픽셀 X 12 픽셀 이미지입니다 상상해보십시오. (: padding: 10px 32px; 예)

CSS

table { 
    border: 10px solid rgb(230,230,230); 
    color: white; 
} 
table thead th, 
table tbody td { 
    background: black; 
    border: solid 1px white; 
    font: bold 12px Helvetica, Arial, sans-serif; 
    padding: 10px; 
} 
table thead th { 
    padding: 0; 
    text-align: center; 
} 
table thead .positioning { 
    padding: 10px 32px; 
    position: relative; 
} 
table thead .img { 
    background: red; 
    height: 12px; 
    margin-top: -6px; 
    position: absolute; 
    right: 10px; 
    top: 50%; 
    width: 12px; 
} 

여기서 기억해야 할 중요한 것은 이미지를위한 공간을 만들기 위해 왼쪽과 positioning DIV 충분한 패딩의 우측을 줄 것입니다. 그렇지 않으면 이미지가 텍스트 위에 겹쳐집니다.

는 여기에 바이올린입니다 : http://jsfiddle.net/brandondurham/nXQeR/

Answer 2

그냥 오른쪽으로 이미지를 떠 :

th img { 
    float: right; 
} 

DEMO :http://jsfiddle.net/marcuswhybrow/ZxUMY/

Answer 3

정확히 당신이 텍스트의 왼쪽/오른쪽 가장자리에서 등거리 중심 싶지 않았다 방법 th 또는 th의 왼쪽 가장자리에서 이미지의 왼쪽까지? 당신의 이미지가 비교적 작기 때문에이 둘 사이에 약간의 차이가 있지만 여전히 눈에 띄는 차이가 있습니다. 이미지 등거리

이 솔루션은 (마커스는 대답으로) 쉽게 : 당신은 페이지의 흐름에서 이미지를 깰 필요가 있기 때문에

등거리

th img { float:right; }

th에 가장자리가 조금 더 필요합니다

th { 
    display:block; 
    position:relative; 
    text-align:center; 
} 
th img { 
    position:absolute; 
    right:0; 
    /* optional, for vertically centering the image 
    top:50%; 
    margin-top:-[image height/2]px; 
    */ 
} 

편집 : http://jsfiddle.net/brillyfresh/4LDZ9/

: 여기에 테이블 셀 (감사 브랜든)에 배치하고, 고정은 단순한 바이올린의