이미지- 이미지 가운데 배치하기, 이미지 포지션으로 조정해 해당 영역만 보이게 하기

*이미지는 인라인 요소이지만 예외로 넓이와 높이가 적용됨

 

*이미지 가운데배치 방법
1. 부모 블럭요소에 text-align:center 하기

-이미지 위의 부모요소인 div 블럭에 text-align:center하면 가운데로 이미지 배치됨.

이미지에는 안됨 (이미지에 width가 없고 그냥 가운데 대충놓을 경우 사용)

2. width주고 margin:auto로 좌우여백주기

-부모 블럭에 width 설정 → 이미지에 width:100%(똑같은 px도 상관없음)주기 → 부모 블럭에 margin:auto

 

1보다는 2방법이 편한듯

 

---

*많은 그림 있는 이미지 한개에서 포지션으로 해당 보이는 영역 조정(많이 쓰이는 방법)
-3개 세로로 붙어있는 이미지 높이가 150px일때 (150/3=50이니까 하나당 px로 조정)
background:url(down/image/list_bg.gif) no-repeat;}
.menu2>li.second{background-position:left top -50px;}
 .menu2>li.last2{border-bottom:none;
background-position:left top -100px;}