반응형일 작업할때 유지할수 있는 수직 정렬

반응형일 작업할때 유지할수 있는 수직 정렬

안녕하세요 TriplexLab 입니다 :)

오늘은 반응형 리스폰일때 유지할수 있는 수직 정렬에 관해서 이야기를 해볼게요.

크게 2가지로 나눌수가 있어요
1번 display: table, table-cell을 하는 방법
2번 position: absolute,와 relative로 하는 방법.


오늘은 먼저 display: table, table-cell 속성을 이용해서 수직 정렬를 해볼게요

HTML

<div class="box_bg">
    <ul class="l_wrapper">
        <li> 
           <div class="table">
               <div class="table_cell"> 
                   <p>심플하고 고저스한 디자인의 서랍입니다. 튀어나온 손잡이 없이 깔끔하게 처리하여 다양한 용도로 사용할 수 있습니다.</p>
                   <p><a href="#0">DETAIL VIEW</a></p>
               </div>
            </div>
        </li>
    </ul>
</div>

CSS

.box_bg {
    height: 50vh; /*vh은 %게념과 비슷하다. 다만 %는 직개 부모 에도 %가 선언되어 있어야 한다면, vh은 나자신의 기준으로 커지는 것이다.*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../img/download2.png);
}
.table {
    width: 100%;
    height: 50vh;
    color: #fff;
    display: table; /*display 성질을 table롤 바꾸어 줘야 한다.*/
}
.table_cell {
    display: table-cell; /* 그 밑에 직개 자식에는 display 성질을 table-cell으로 바꾸어 줘야 한다.*/
    vertical-align: middle;  /*table에 관한 수직정렬 속성 top, middle, bottom 3가지가 있다.*/
    text-align: center;
    position: relative;
}
.table_cell p:nth-child(1) {
    width: 350px;
    margin: 0 auto;
}
.table_cell p:nth-child(2) {
    margin-top: 15%;
}
.table_cell p:nth-child(2) a {
    font-weight: 600;
}

결과)

이렇게 pc일때, 모바일일때 동일하게 텍스트가 가운데 수직 정렬이 되는것을 확인 할수가 있습니다.!
다음 시간에는 position속성에 관해서 이야기를 해볼게요~^^ 기대해주세요~ㅋ