이미지 가운데 정렬 후 양옆 자르기
본문
이미지가 원래는 ----------이벤트---------- 이런 이미지인데
이걸 가운데로 정렬하고 양옆을 overflow로 히든줘서 짜르려고 하는데
margin:0 auto; 를 주나 text-align:center를 주나 가운데로 정렬이 안되고 오른쪽만 잘리는데...
이거 어떻게 해야 가운데 정렬하면서 양옆을 자를수가 있죠?
답변 4
샘플 코드 올려보세요.
<div class="phcategory"><img src="/main/img/event.png" value="이벤트"></div>
.phcategory {width:100%; margin:0 auto; overflow:hidden;}
.phcategory img {width:100%;}
이랬는데 답변보고 변경해봤는데도 가운데 정렬은 안되네요.
변경후
.phcategory {width:600px; height:100px;}
.phcategory img {width:600px; height:100px;} 입니다.
아래 좌표 맨 하단 참고해 작업해 보세요.
https://homzzang.com/b/html-55
https://homzzang.com/b/css-116
답변 감사합니다.
.phcategory{ width: 90%; text-align: center; overflow: hidden; } .phcategoryimg { position: relative; left: 100%; margin-left: -200%; }
답변 감사합니다~
margin 이런거 말고 height, width 만 지정해주면 기본 동작이 님이 말한 center crop 일겁니다.
.phcategory {width:600px; height:100px;}
.phcategory img {width:600px; height:100px;}
이렇게 줬는데 왼쪽기준으로 오른쪽만 이미지가 잘려요
가운데에서 양쪽이 잘려야 글씨가 가운데로 오는데 그게 안되는데요...
phcategory 말고 img 태그에 아이디 주고 그걸로 해보세요
음.... img에 아이디 주고 했는데도 똑같네요.... 뭔가 다른곳이 이상한가봐요.
더 찾아봐야겠네요 답변 감사합니다~
저도 도움이 되었습니다. 감사합니다.