버튼 중앙으로 옮기기

버튼 중앙으로 옮기기

QA

버튼 중앙으로 옮기기

본문

더보기 펼치기 버튼을 구현한 내용입니다.(인터넷에서 퍼온 것입니다)
잘 작동하는데, 더보기(닫기) 버튼이 죄측에 있어서요, 이거를 중앙으로 위치시키려고 하는데요,
여러가지 방법을 시도해보았으나 잘 되지 않아서 문의드립니다
버튼 중앙 위치 방법 알려주시면 감사하겠습니다^^ 고수님께 고맙습니다^^

 

https://johogun.com/test10.html  참조페이지입니다


<style>
  .card-content {
  width: 50%;
  background-color: #fff;
  border-radius: 1rem;
  overflow: hidden;
  margin: 5rem auto;
  padding-bottom: 3rem;
}

.card-header {
  padding: 0 1rem;
  margin: 2rem 0;
  font-size: 24px;
}

.card-description {
  font-size: 20px;
  padding: 1rem;
 
   display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; 
  overflow: hidden;
}

.card-content-img {
  width: 100%;
}


.card-content__more-btn {
  appearance: none;
  border: 1px solid black;
  padding: 0.5em;
  border-radius: 0.25em;
  cursor: pointer;
  margin: 1rem;
  }

.card-content__more-btn::before {
  content: '더보기';
}

.card-content__more-btn:checked::before {
  content: '닫기';
}

.card-description:has(+ .card-content__more-btn:checked) {
  -webkit-line-clamp:unset
}
</style>

<div class="card-content">
      <img
        src="https://images.unsplash.com/photo-1647773319917-f9a98647f6b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
        alt="바다 사진"
        class="card-content-img"
      />
      <h1 class="card-header">테스트입니다</h1>
      <p class="card-description">
        
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis esse
        fugit nihil earum aut nobis, praesentium illum expedita quia, mollitia
        possimus sed, numquam et velit aspernatur tenetur vero doloremque ipsum!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero corporis
        sunt suscipit beatae rerum exercitationem aliquam architecto? Aspernatur
        ex in cum suscipit iusto repudiandae dolores hic, rerum, quae voluptatem
        quidem.
      </p>
            <input type="checkbox" class="card-content__more-btn">
    </div>

이 질문에 댓글 쓰기 :

답변 1

아래와 같이 html + css 변경해주세요

 


<div class="card-content__more">
  <input type="checkbox" class="card-content__more-btn">
</div>

 


.card-content__more{justify-content: center; display:flex;}

아 예 마음속 깊이 정말 감사드립니다. 그런데 알려주신 대로 하니까 펼치기 더보기 펼치기 기능이 작동하지를 않네요,,, 어떻게 해야 할지,,,,  https://johogun.com/test11.html  이곳에서 확인가능합니다,,,,

맨 하단에...아래 코드 그대로 복붙해주세요

      <script>
        document.querySelector('.card-content__more-btn').addEventListener('change', function () {
            var description = document.querySelector('.card-description');
            if (this.checked) {
                description.style.display = '-webkit-box';
                description.style.webkitLineClamp = 'unset';
            } else {
                description.style.display = '-webkit-box';
                description.style.webkitLineClamp = '3';
            }
        });
    </script>

아이고 미니님a 님 너무 감사합니다. 정말 별볼일없는 질문에 이렇게 자세히 가르쳐주시니 너무 고맙습니다. 저로서는 고민고민하다 해결되지 않아서 질문드리게 되었고요, 해결책을 만나서 감개무량합니다~ 좀 실례되는 말씀이겠지만 솔직히 저녁식사라도 정성을 다해 대접해드리고 싶은 심정입니다. 복많이 받으시고 항상 행운이 함께하시기를 기원올립니다^^ 제가 지금 외부에 있다보니 핸펀으로 하다보니 우선 감사말씀부터  올립니다  거듭거듭 고맙습니다~^^

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

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