인덱스 페이지에서 section정렬

인덱스 페이지에서 section정렬

QA

인덱스 페이지에서 section정렬

본문

인덱스 페이지 날려 먹어서 복구 중인데.... 다행히 제작 해주신쪽에서 완성본은 아니지만 카피파일이 있어 활용중입니다.ㅠㅠ

 

 <h1>나무와 친환경, 그리고 함께하는<br>
친환경소재와 업사이클링으로 환경을 생각하고 함께 이루어가는 기업
</h1>
    <h2>Education Service<br>
eco-friendly products <br>
upcycling service <br>
society together
</h2>
<p>교육하고 실습하여 업사이클링서비스와 친환경제품제작 판매와, <br>
진로, 창업 지원을 제공하여 취약계층의 자립을 지원하고 그들과 환경문제를 함께 풀어가고 있습니다, 
</p>

 

이부분이 화면 가운데 보여져야 하는데 계속 아래처럼 나오네요..ㅠㅠ

2038706226_1672292868.8646.png

warp정렬로 검색도 해보고 이것 저것 넣어봤는데 글씨크기도 마으매로 안되고...ㅠㅠ<h2>만 영문글씨처럼 커지고 다른건 적용이 안되고.....

가운데 정렬도 안되고..ㅠㅠ  

어떻게 해야 하나요~!!!!!

PC에서도 가운데 정렬

Mobile에서도 화면 잘리지 않게 보이고 싶어요!!

도와주세요~~~

 

에디트 플러스에서 확인한 소스입니다.(__)

 

<!--■■■tl_page_box_warp consulting_page■■■ 
<section class="tl_consulting_page_warp">
<div class="inner clearfix">
  <h2 class="aos-init aos-animate" data-aos="fade-right" data-aos-delay="200">BUSINESS CONSULTING</h2>
  <p class="aos-init aos-animate" data-aos="fade-right" data-aos-delay="400">글로벌 비지니스의 시작부터 성공까지</p>
  <ul class="clearfix">
  <li class="aos-init aos-animate" data-aos="fade-up" data-aos-delay="200"><a href="/" class="lt_img"><img src="<?=G5_THEME_URL?>/img/round01.jpg" /></a><p>나아가는 서비스</p></li>
  <li class="aos-init aos-animate" data-aos="fade-up" data-aos-delay="400"><a href="/" class="lt_img"><img src="<?=G5_THEME_URL?>/img/round02.jpg" /></a><p>앞서가는 서비스</p></li>
  <li class="aos-init aos-animate" data-aos="fade-up" data-aos-delay="600"><a href="/" class="lt_img"><img src="<?=G5_THEME_URL?>/img/round03.jpg" /></a><p>성장하는 서비스</p></li>
  <li class="aos-init aos-animate" data-aos="fade-up" data-aos-delay="800"><a href="/" class="lt_img"><img src="<?=G5_THEME_URL?>/img/round04.jpg" /></a><p>함께하는 서비스</p></li>
  <li class="aos-init aos-animate" data-aos="fade-up" data-aos-delay="1000"><a href="/" class="lt_img"><img src="<?=G5_THEME_URL?>/img/round05.jpg" /></a><p>만족하는 서비스</p></li>
  </ul>
</div>
</section>
<!--■■■tl_page_box_warp consulting_page■■■--> 
<!--■■■tl_company_box_warp■■■-->

    <section class="tl_company_box_warp">
     <div class="inner clearfix">
         <h1>나무와 친환경, 그리고 함께하는<br>
친환경소재와 업사이클링으로 환경을 생각하고 함께 이루어가는 기업
</h1>
    <h2>Education Service<br>
eco-friendly products <br>
upcycling service <br>
society together
</h2>
<p>교육하고 실습하여 업사이클링서비스와 친환경제품제작 판매와, <br>
진로, 창업 지원을 제공하여 취약계층의 자립을 지원하고 그들과 환경문제를 함께 풀어가고 있습니다, 
</p>


</section>


<!--■■■tl_company_box_warp■■■--> 

이 질문에 댓글 쓰기 :

답변 2

텍스트가 가운데 정렬을 하고 싶으신거면 저기 해당하는 h1, h2, p에 text-align:center 속성을 넣어주시면 됩니다. 

 

 

저 내용들이 좌측정렬을 한 상태로 가운데 정렬을 하고 싶으신 거면 

.tl_company_box_warp .inner{display:flex;justify-content:center; align-items:center;flex-wrap:wrap;flex-wrap:wrap;}
.tl_company_box_warp .inner h2, .tl_company_box_warp .inner h1, .tl_company_box_warp .inner p{width:100%;}

 

아마 이렇게 처리하면 될것 같은데 지금 css 어떻게 셋팅돼 있는지도 확인해 봐야 됩니다. 

목차1번 가운데정렬 원리에 관해서 30분 정도만 투자해 공부해 보세요.

https://homzzang.com/b/css-254

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

회원로그인

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