SIR

안녕하세요 메인페이지 최근갤러리 정렬 질문입니다

안녕하세요 메인페이지 최근갤러리 정렬 질문입니다

QA

안녕하세요 메인페이지 최근갤러리 정렬 질문입니다

본문

안녕하세요 혼자 이것저것 정보보면서 배우고 있는 사람입니다

 

메인페이지에 최근갤러리가 4개 2줄로 가운데로 정렬시키고 여백을 서로 각각 조금씩 주고싶습니다

 

/* 새글 스킨 (latest) */

.lat_pic_basic > h2{display:none;}
.lat_pic_basic .lat_pic_basic_inner{font-size:0;}
.lat_pic_basic .lat_pic_basic_item{display:inline-block; position:relative; width:25%; vertical-align:top; font-size:15px;}
.lat_pic_basic .lat_pic_basic_item:after{content:""; position:absolute; top:0; left:20; bottom:0; right:0; background:rgba(0,0,0,.75); opacity:0; z-index:-1; 
    -webkit-transition:all .3s ease; transition:all .3s ease;}
.lat_pic_basic .lat_pic_basic_item a{display:block; position:relative;}
.lat_pic_basic .lat_pic_basic_item img{100%;}

.lat_pic_basic .pic_thumb{position:relative; padding-top:68.4684%;}
.lat_pic_basic .pic_thumb > p{position:absolute; top:0; left:0; bottom:0; right:0; overflow:hidden;}
.lat_pic_basic .pic_thumb > p img{width:80%; height:80%; object-fit:cover;}

.lat_pic_basic .pic_title{position:absolute; top:20px; left:0; bottom:0; right:0; text-align:center; opacity:0; webkit-transition:all .4s ease; transition:all .4s ease;}
.lat_pic_basic .pic_title .pic_title_inner{display:inline-block; padding:4px 15px; border-radius:20px; background:#fff; color:#222;}

/* 갤러리 베이직 hover */
.lat_pic_basic .lat_pic_basic_item:hover:after{opacity:1; z-index:2}
.lat_pic_basic .lat_pic_basic_item:hover .pic_title{opacity:1; z-index:4; top:40%;}

.pic_lt .empty_li {line-height:145px ;color:#666;text-align:center;padding:0}
.pic_lt .empty_li:before {background:none;padding:0}
 

지금 어느정도 수정을 해봤는데 왼쪽으로 최근갤러리 4개가 출력되는데 너무 왼쪽으로 치우쳐져 있으며

가운데로 정렬 각각 이미지 1개씩 여백을 조금씩 주고싶은데 어디쪽을 수정해야 할까요?

감사합니다

 

더 좋은 답변을 위해 필요한 추가정보를 요청해 보세요.

추가정보요청

이 질문에 댓글 쓰기 :

답변 3


/* 새글 스킨 (latest) */
.lat_pic_basic > h2{display:none;}
.lat_pic_basic .lat_pic_basic_inner{font-size:0;}
.lat_pic_basic .lat_pic_basic_item{display:inline-block; position:relative; width:25%; vertical-align:top; font-size:15px;}
.lat_pic_basic .lat_pic_basic_item:after{content:""; position:absolute; top:0; left:20; bottom:0; right:0; background:rgba(0,0,0,.75); opacity:0; z-index:-1; 
    -webkit-transition:all .3s ease; transition:all .3s ease;}
.lat_pic_basic .lat_pic_basic_item a{display:block; position:relative;}
.lat_pic_basic .lat_pic_basic_item img{100%;}
.lat_pic_basic .pic_thumb{position:relative; padding-top:68.4684%;}
.lat_pic_basic .pic_thumb > p{position:absolute; top:0; left:0; bottom:0; right:0; overflow:hidden;}
.lat_pic_basic .pic_thumb > p img{width:80%; height:80%; object-fit:cover;}
.lat_pic_basic .pic_title{position:absolute; top:20px; left:0; bottom:0; right:0; text-align:center; opacity:0; webkit-transition:all .4s ease; transition:all .4s ease;}
.lat_pic_basic .pic_title .pic_title_inner{display:inline-block; padding:4px 15px; border-radius:20px; background:#fff; color:#222;}
/* 갤러리 베이직 hover */
.lat_pic_basic .lat_pic_basic_item:hover:after{opacity:1; z-index:2}
.lat_pic_basic .lat_pic_basic_item:hover .pic_title{opacity:1; z-index:4; top:40%;}
.pic_lt .empty_li {line-height:145px ;color:#666;text-align:center;padding:0}
.pic_lt .empty_li:before {background:none;padding:0}

 

아 네 몰랐네요..

소스만으로 정확하지 않은데 아래와 같이 수정해보세요.

.lat_pic_basic .lat_pic_basic_item{display:inline-block; position:relative; width:50%; text-align:center; vertical-align:top; font-size:15px;}

일단 센터 정렬쪽은 해결되었습니다  감사합니다~!
혹시 실례가 안된다면 각각 1줄당 4개씩 이미지가 출력되는데 각각 이미지 사이에 여백이 너무 벌어져서 그러는데 이것도 혹시 어디부분을 수정해야할까요?

답변을 작성하시기 전에 로그인 해주세요.
전체 44,868
QA 내용 검색

회원로그인

진행중 포인트경매

  1. 참여24 회 시작21.03.02 12:00 종료21.03.07 12:00

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT