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

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

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개씩 이미지가 출력되는데 각각 이미지 사이에 여백이 너무 벌어져서 그러는데 이것도 혹시 어디부분을 수정해야할까요?

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

회원로그인

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