CSS - 너무 좁은 표 셀 안에 대형 div 중심 지정

Question

너무 좁은 표 셀 안에 DIV를 표시하려고합니다. 나는 overflow : hidden을 사용하여 div가 테이블 셀의 한면을 엎 지르도록 허락했으나 이제는 한쪽면에서 많은 양의 insdead 양측에 소량의 비트가 쏟아 지도록 중앙에 놓기를 원합니다.

DIV가 너무 좁은 TD 내부에서 DIV를 수평 중심에 배치하려면 어떻게해야합니까?

Answer 1

레이아웃이 고정되어 있으면 div를 항상 절대적으로 배치 할 수 있습니다. 또한이

#myDiv 
{ 
    position: relative; 
    left: 20px; 
} 

top, right 및 bottom CSS는 위치 속성 :

#myDiv 
{ 
    position: absolute; 
    left: 20px; 
} 

또는 사업부의 필요가 테이블 셀의 현재 위치를 기준으로 할 경우

. 이들은 필요한 방향에 따라 양수 또는 음수가 될 수 있습니다.

Answer 2

이 사업부는 내부 사업부가합니다

<td><div class="outer"> 
    <div class="inner></div> 
</div></td> <!--close cell> 

그런 다음 적용을 50 % 마진 왼쪽 div.outer하고 마이너스 50 % div.inner에 마진이 왼쪽. 이것은 div를 셀의 수평 중심에 완벽하게 배치해야합니다.

개념 :

는의 테이블 셀 폭 20 픽셀이며 사업부의의가 22 픽셀 넓은 있다고 가정 해 봅시다. 상자의 div.outer 왼쪽 가장자리가 표 셀 내의 10 픽셀 위치로 밀려납니다. 그런 다음 -50 %의 margin div.inner가 왼쪽 11 픽셀로 되돌아 가서 테이블 셀의 왼쪽에 1 픽셀 밖에 배치하고 오른쪽에 1 픽셀을 본질적으로 오버 플로우시킵니다.