모던 갤러리 latest 부분 가운데 정렬

http://thevalueup1.cafe24.com/

페이지의 speaker 아래에 최신 글이 나오게 했는데 가운데 정렬이 안됩니다.

도와주세요!!!ㅠㅠㅠㅠ

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 스킨의 style.css 파일을 수정하세요.

    .kboard-latest-title

    .kboard-latest-date

    위쪽에 text-align: center; 속성을 주시면 중앙정렬이 됩니다 :)

  • #kboard-modern-gallery-latest * { text-shadow: none; }
    #kboard-modern-gallery-latest .kboard-modern-gallery-latest-item { float: left; width: 250px; padding: 0 12px 12px 0; overflow: hidden; }
    #kboard-modern-gallery-latest .kboard-modern-gallery-latest-thumbnail { display: block; width: 100%; height: 170px; line-height: 130px; color: black; vertical-align: middle; text-align: center; text-decoration: none; background-position: center; background-size: cover; }
    #kboard-modern-gallery-latest .kboard-modern-gallery-latest-thumbnail:hover { opacity: 0.7; filter: alpha(opacity=70); }
    #kboard-modern-gallery-latest .kboard-modern-gallery-latest-title { margin: 0; padding: 0; width: 100%; text-align: center; }
    #kboard-modern-gallery-latest .kboard-modern-gallery-latest-title a { font-size: 12px; text-decoration: none; color: #555555; }
    #kboard-modern-gallery-latest .kboard-modern-gallery-latest-title a:hover { color: #7fc132; }

     

    이 중 어느 부분이요??

    (위 부분이 현재 상태입니다.)

  • #kboard-modern-gallery-latest .kboard-modern-gallery-latest-title 이부분 입니다.

  • 그 안에 지금 text-align: center; 들어가 있는 것이 현재 상태인데, 

    제 의도를 잘못 이해하신 것 같아요.

    저는 아.. 여기 이미지 업로드가 안되네요...

    http://thevalueup1.cafe24.com/

    이 페이지 아래에 'Speakers' 아래의 latest 전체가 가운데 정렬이 되게끔 하고 싶은 겁니다.

    현재 왼쪽으로 치우쳐져있잖아요.

    내부 column안에 최신글 shortcode가 들어가있는데 컬럼이 가운데 정렬 속성을 갖고 있는데도, 가운데 정렬이 안됩니다.

    말씀하신건 latest-title 속성인 것 같은데 이거는 그림 아래에 제목이 가운데 정렬되게 하는 것 아닌가요? 그리고 기본 코드가 가운데 정렬로 위에 보시다싶이 이미 되어있습니다.

    제가 하고싶은건 최신글 목록 자체를 가운데 정렬 하고싶은 겁니다. 지금 4개가 나와있는데 그 부분이 왼!쪽!으로 치우쳐져있어요. 

  • kboard-modern-gallery-latest-item 자체가 float:left; 속성이 들어가 있습니다.

    float 속성을 지우시고

    display: inline-block; 속성으로 주신 후

    kboard-modern-gallery-latest 이쪽에 text-align: center; 속성을 줘보세요.

    될런지는 테스트 못했지만..

    display: inline-block; 속성을 주면 text-align 속성이 먹힙니다.

  • 그리고 해당 위치를 찾으시려면 브라우저 개발자도구(F12키)를 사용하시면 쉽게 찾으실 수 있습니다 :)


  • #kboard-modern-gallery-latest * { text-align: center; text-shadow: none; }
    #kboard-modern-gallery-latest .kboard-modern-gallery-latest-item { display: inline-block; width: 250px; padding: 0 12px 12px 0; overflow: hidden; }
    #kboard-modern-gallery-latest .kboard-modern-gallery-latest-thumbnail { display: inline-block; width: 100%; height: 170px; line-height: 130px; color: black; vertical-align: middle; text-align: center; text-decoration: none; background-position: center; background-size: cover; }
    #kboard-modern-gallery-latest .kboard-modern-gallery-latest-thumbnail:hover { opacity: 0.7; filter: alpha(opacity=70); }
    #kboard-modern-gallery-latest .kboard-modern-gallery-latest-title { margin: 0; padding: 0; width: 100%; text-align: center; }
    #kboard-modern-gallery-latest .kboard-modern-gallery-latest-title a { font-size: 12px; text-decoration: none; color: #555555; }
    #kboard-modern-gallery-latest .kboard-modern-gallery-latest-title a:hover { color: #7fc132; }

    이렇게 했는데 안 되네요..ㅠ

    제가 CSS 쪽은 잘 배운 적이 없어서 죄송하지만, 다시 한번 살펴주세요..ㅠ

  • #kboard-modern-gallery-latest * { text-align: center; text-shadow: none; }

    이쪽이 아니라

    #kboard-modern-gallery-latest { text-align: center; }

    이쪽해 해주셔야 합니다.

    '*' 별표쪽에 하시는게 아닙니다. 별표쪽에는 text-align: center;속성을 지워주세요.

  • 해결 되었습니다. 감사합니다.!!!!!

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기