이전 목록 다음
채택완료

이미지 가운데 정렬 후 양옆 자르기

mmorrie
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-05-13 (수) 15:32:04 5,730

3731206609_1589351445.7988.png

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

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

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

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

양옆자르기
|

답변 4개 / 댓글 8개

채택된 답변
+20 포인트
sinbi
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-05-13 (수) 15:39:59

샘플 코드 올려보세요.

답변에 대한 댓글 3개

morrie
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-05-13 (수) 15:49:07
<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;} 입니다.
sinbi
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-05-13 (수) 15:51:24
아래 좌표 맨 하단 참고해 작업해 보세요.
https://homzzang.com/b/html-55
https://homzzang.com/b/css-116
morrie
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-05-13 (수) 16:38:46
답변 감사합니다.
버버미
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-05-13 (수) 21:12:47

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

웹웹학교
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-05-13 (수) 15:53:18 
.phcategory {
    width: 90%; 
    text-align: center; 
    overflow: hidden; 
}

.phcategory img {
    position: relative; 
    left: 100%; 
    margin-left: -200%; 
}
 

답변에 대한 댓글 2개

sinbi
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-05-13 (수) 16:05:26
https://codepen.io/sinbi/pen/XWmBMBj
morrie
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-05-13 (수) 16:58:48
답변 감사합니다~
탈탈퇴회원
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-05-13 (수) 15:44:38

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

답변에 대한 댓글 3개

morrie
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-05-13 (수) 15:47:58
.phcategory {width:600px; height:100px;}
.phcategory img {width:600px; height:100px;}
이렇게 줬는데 왼쪽기준으로 오른쪽만 이미지가 잘려요
가운데에서 양쪽이 잘려야 글씨가 가운데로 오는데 그게 안되는데요...
백수1995
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-05-13 (수) 15:52:03
phcategory 말고 img 태그에 아이디 주고 그걸로 해보세요
morrie
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2020-05-13 (수) 16:38:11
음.... img에 아이디 주고 했는데도 똑같네요.... 뭔가 다른곳이 이상한가봐요.
더 찾아봐야겠네요 답변 감사합니다~

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