④인라인 엘리먼트의 세로정렬

1.vertical-align

CSS에서는 가로정렬 보다 세로정렬이 훨씬 어려운데, 세로정렬을 정확히 이해하기 위해서는 세로정렬에서 가장 빈번히 사용되는 vertical-align을 정확히 이해하는 것이 필요합니다. vertical-align은 본래 인라인 엘리먼트에만 적용이 가능하며, vertical-align이 적용된 해당 인라인 엘리먼트의 한 라인 안에서의 상대적인 위치(top,middle,bottom)을 표현하는 속성입니다. 



위의 비교 그림에서 보면 알 수 있듯, vertical-align은 인라인 엘리먼트의 한 라인을 기준으로 상대적인 위치를 표현합니다. 

 이와 같은 성질을 이용하여 블록 엘리먼트도 세로 정렬을 조정하는데, 여기서 한가지 의문이 생깁니다. vertical-align는 인라인 엘리먼트에만 적용이 가능하다고 했는데 블록 엘리먼트에 어떻게 적용하지? 하는 궁금증 입니다. 이를 위해 display:inline-block 이라는 속성이 등장하게 됩니다. 즉, 블록 엘리먼트를 강제로 인라인 엘리먼트화 하여 vertical-align을 적용시켜 버리는 것이죠.


 이때 한가지 더 복잡한 문제는, 가운데 정렬 시키고 싶은 블록 엘리먼트에 vertical-align을 적용하는 것이 아니고, 그 한단계 위에 있는 부모 블록 엘리먼트에 vertical-align을 적용해야, 내가 타겟으로 삼은 블록 엘리먼트의 세로 정렬이 이루어 진다는 점입니다. 예를 통해 설명하겠습니다.


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container{
            background-color:rgb(125, 163, 3);
            width:600px;
            heghtㅑ:600px;
        }
        .outer{
            background-color:rgb(156, 198, 21);
            width:500px;
            height:500px;
        }
        .inner{
            background-color:rgb(202, 244, 66);
            width:400px;
            height:400px;
            margin:auto;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .centered{
            background-color:rgb(226, 255, 132);
            width:300px;
            height:300px;
            display: inline-block;
            width: 60%;
        }
        .target_p{
            background-color:white;
            width:200px;
            height:200px;
        }
        .target_span{
            background-color:white;
        }
    </style>
 
</head>
<body>
    <div class="container">
        <div class="outer">
            <div class="inner">
                <div class="centered">
 
                    <p class="target_p">
                        target_p center text?
                    </p>
                    <span class="target_span">
                        target_span center text?
                    </span>
 
                </div>
            </div>
        </div>
    </div>
 
</body>
</html>
 




위의 예를 보면 .centered이 .inner의 정 중앙에 위치 한 것을 알 수 있습니다. 


        .inner{
            background-color:rgb(202, 244, 66);
            width:400px;
            height:400px;
            margin:auto;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }



        .centered{
            background-color:rgb(226, 255, 132);
            width:300px;
            height:300px;
            display: inline-block;
            width: 60%;
        }



여기서 핵심은 .inner의 display: table-cell;와 vertical-align: middle; 그리고

.centered의 display: inline-block;입니다.


먼저 .centered을 display: inline-block;입으로 선언하여 인라인 엘리먼트화 시킵니다. 그리고 그 부모 블록 엘리먼트 인 .inner에서 vertical-align: middle; 을 선언하므로 그 아래의 인라인 엘리먼트 들은 세로 정렬이 되는 것이죠. 또한, text-align: center;이 선언되었으므로 상속으로 인해 자식요소들의 가로 정렬도 이루어 지게 됩니다.


⑤블록 엘리먼트 내의 텍스트 세로정렬

위와 같은 vertical-align: middle; 의 성질을 이용하면 됩니다.




⑥블록 엘리먼트 자체의 세로정렬

1.vertical-align의 이용



2.position:absolute;margin-left:auto; margin-right:auto; margin-top:X%;


3.position:a​bsolute; transform:translate(X%, X%);

http://dongpal.tistory.com/2참고


4.bootstrap의 class="vertical-center", margin="auto"

한 단계 위의 블록 엘리먼트에 class="vertical-center"을 설정하면 그 바로 아래 레벨의 블록과 인라인 엘리먼트들의 세로정렬이 수행된다.






저작자표시 비영리 변경금지

'Front-end > HTML,CSS Basic' 카테고리의 다른 글

Sass(SCSS) 완전 정복!  (0) 2018.09.26
[CSS]css selector  (0) 2018.01.25
[CSS]중앙정렬1 - 인라인엘리먼트와 블록엘리먼트의 가로 정렬  (0) 2018.01.25
[CSS] position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)  (0) 2018.01.25
[CSS]css 상속, css 적용 우선순위  (0) 2018.01.25

+ Recent posts

티스토리툴바