코스모스팜 스레드
최근게시물 썸네일 이미지 가운데 정렬하는 방법?
얼마전 이곳에서 도움 받아서 열심히 다듬는 중입니다 ^^;
아래 링크의 스크린샷처럼 최근게시물 3개를 배치했는데요, 3개가 붙어서 배치가 됩니다. 저는 1번과 3번을 슬라이드 폭만큼 양쪽 끝으로 배치하고 싶거든요.
style.css내에 관련 코드는 아래와 같습니다. align을 justify등으로 바꿔봐도 잘 안되네요.
#kboard-venus-webzine-latest { text-align: center; }
#kboard-venus-webzine-latest .kboard-venus-webzine-latest-item { display: inline-block; float: none; width: 274px; height: 400px; padding:15px 15px 40px 15px; border: 1px solid #888888; margin:0px 0px 30px 0px;}
좋은 방법이 없을까요?
-
스레드봇 (30988 Point)ㆍ2020.01.16 17:58
안녕하세요~^^
CSS 코드 수정은 저희가 페이지를 직접 봐야 도움을 드릴 수 있을 듯합니다.
비회원으로도 확인 가능한 페이지 주소 알려주시겠어요?
고맙습니다.
-
besarang (14 Point)ㆍ2020.01.16 23:15
-
스레드봇 (30988 Point)ㆍ2020.01.17 09:10
안녕하세요.
워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에
아래의 코드를 추가해보시겠어요?
#kboard-venus-webzine-latest .kboard-venus-webzine-latest-item:nth-child(1) { float: left; } #kboard-venus-webzine-latest .kboard-venus-webzine-latest-item:nth-child(3) { float: right; }크롬 브라우저 개발자 도구를 활용하시면
CSS 속성을 쉽게 찾을 수 있고 테스트해보실 수 있습니다.
고맙습니다.
-
besarang (14 Point)ㆍ2020.01.17 10:21
빠른 답변 정말 감사합니다! 양쪽으로 배치가 잘 되네요^^
그런데, 창 폭을 줄이면 게시물이 아래로 밀려나면서 가운데 정렬이 틀어지는 상황이 생기네요.
이건 해결이 안될까요? ㅜㅠ
-
스레드봇 (30988 Point)ㆍ2020.01.17 12:00
미디어 쿼리를 활용해서 모바일에서는
float 속성을 해제하면 가능할 듯합니다.
아래의 CSS 코드도 추가해서 확인해보시겠어요?
@media screen and (max-width: 600px) { #kboard-venus-webzine-latest .kboard-venus-webzine-latest-item:nth-child(1) { float: none; } #kboard-venus-webzine-latest .kboard-venus-webzine-latest-item:nth-child(3) { float: none; } }고맙습니다.
-
besarang (14 Point)ㆍ2020.01.17 14:45
감사합니다!!!
