테이블 중앙에 이미지를 표시하는 방법은 무엇입니까?

Question

나는 <table>을 가지고 있으며 정확한 중심에 <table>에 <img>을 표시하고자합니다.

어떻게하면됩니까?

Answer 1

이미지의 크기가 고정되어있는 경우 (예를 들어, 폭 200 높이 300),이 같은 일을해야 :

HTML :

<div id="table-and-image-container"> 
    <table id="the-table">...</table> 
    <img src="..." id="the-image" /> 
</div> 

CSS :

#table-and-image-container 
{ 
    position: relative; 
    display: inline-block; 
} 
#the-table 
{ 
    z-index: 1; 
} 
#the-image 
{ 
    left: 50%; 
    margin-left: -100px; /* = 200px width of image/2 */ 
    margin-top: -150px; /* = 300px height of image/2 */ 
    position: absolute; 
    top: 50%; 
    z-index: 2; 
} 

#table-and-image-container을 포함하는 것은 position: absolute이 크기 조정 알고리즘에서 #the-image을 취하고 display: inline-block w를 취할 것이기 때문에 테이블의 크기가됩니다 컨테이너의 100 % 대신 테이블 너비로 너비를 줄이십시오. 그런 다음 표준 top/left/margin 트릭을 사용하여 이미지를 가운데에 배치하고 z-index을 사용하여 이미지가 맨 위에 오도록합니다.