테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

이미지 가운데 정렬 후 양옆 자르기 채택완료

morrie 5년 전 조회 5,479
답변 4
목록

 

이미지가 원래는 ----------이벤트---------- 이런 이미지인데

이걸 가운데로 정렬하고 양옆을 overflow로 히든줘서 짜르려고 하는데

margin:0 auto; 를 주나 text-align:center를 주나 가운데로 정렬이 안되고 오른쪽만 잘리는데...

이거 어떻게 해야 가운데 정렬하면서 양옆을 자를수가 있죠?

#양옆자르기
댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
s
sinbi Expert
5년 전

샘플 코드 올려보세요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

m
morrie
5년 전
<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;} 입니다.
s
sinbi
5년 전
아래 좌표 맨 하단 참고해 작업해 보세요.
https://homzzang.com/b/html-55
https://homzzang.com/b/css-116
m
morrie
5년 전
답변 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

버
버미
5년 전

저도 도움이 되었습니다. 감사합니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

웹
웹학교
5년 전
.phcategory {
    width: 90%; 
    text-align: center; 
    overflow: hidden; 
}

.phcategory img {
    position: relative; 
    left: 100%; 
    margin-left: -200%; 
}
 
로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

s
sinbi
5년 전
https://codepen.io/sinbi/pen/XWmBMBj
m
morrie
5년 전
답변 감사합니다~

댓글을 작성하려면 로그인이 필요합니다.

백
백수1995
5년 전

margin 이런거 말고 height, width 만 지정해주면 기본 동작이 님이 말한 center crop 일겁니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

m
morrie
5년 전
.phcategory {width:600px; height:100px;}
.phcategory img {width:600px; height:100px;}
이렇게 줬는데 왼쪽기준으로 오른쪽만 이미지가 잘려요
가운데에서 양쪽이 잘려야 글씨가 가운데로 오는데 그게 안되는데요...
�
백수1995
5년 전
phcategory 말고 img 태그에 아이디 주고 그걸로 해보세요
m
morrie
5년 전
음.... img에 아이디 주고 했는데도 똑같네요.... 뭔가 다른곳이 이상한가봐요.
더 찾아봐야겠네요 답변 감사합니다~

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인