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

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

 

메인페이지에 최근갤러리가 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개

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

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

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

답변에 대한 댓글 2개

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

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

Copy
/* 새글 스킨 (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}

 

아 네 몰랐네요..

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

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

소스코드 첨부하실때에는

Copy
소스코드
사용해주시면 보기편합니다.
로그인 후 평가할 수 있습니다

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

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

로그인
🐛 버그신고