Programming/FrontEnd

[CSS] 한 걸음 더 CSS: 코딩가나다 버티컬 얼라인(세로 정렬, vertical-align)

devpine 2019. 12. 16. 22:11
반응형

예제1.

index6.html

<!DOCTYPE html>
<html>
    <head>
        <title>06 vertical align</title>
        <link rel="stylesheet" href="style6.css">
    </head>
    <body>
        <div class="wrapper">
            <div class="box"></div>
        </div>
    </body>
</html>

 

style6.css

body{
    background-color: #999;
}
.wrapper{
    background-color: blanchedalmond;
    width: 960px;
    height: 400px;
    line-height: 400px; /*한 줄 height를 전체 height로 잡아주면 vertical-align 세로 middle 성공!*/
    text-align: center; /*여기서 text-align으로 좌우 center로도 만들어주기*/
    margin: 0 auto;
}
.box{
    display: inline-block;  /*inline 속성을 포함해야 vertical-align의 middle이 의미 있어짐*/
    background-color: green;
    width: 100px;
    height: 100px;
    vertical-align: middle;
}

 

예제2.

index6.html

<div class="wow">
	<span class="text">Apple 애플 Macbook 맥북 Pro 프로</span>
	<span class="badge">NEW</span>
</div>

style6.css

body{
    background-color: #999;
}
.wow{
    background-color: white;
}
.text{
    background-color: orange;
    font-size: 30px;
}
.badge{ /*badge 위치*/
    background-color: orangered;
    color: white;
    font-size: 0.3em;
    vertical-align: middle; /*정확히 middle에 오는게 아니고, eng text의 middle에 위치. 
    따라서 아래와 같은 작업을 해줘야 함.*/
    padding: 0.2em 0.8em 0.2em;
    display: inline-block;
    border-radius: 30px;
    margin-top: -1.2em;
}

 

아래 강의를 수강하고 개인적으로 정리하는 글입니다.

https://programmers.co.kr/learn/courses/4521

 

한 걸음 더 CSS: 코딩가나다 | 프로그래머스

× 본 강의 시리즈는 총 14개의 자음 개수에 따라 순차적으로 제작됩니다. 7/13 기준으로 8강까지 업로드 되어있으며, 하나씩 순차적으로 업데이트 됩니다. 한 걸음 더 CSS: 코딩가나다 부트스트랩 없으면 CSS는 쳐다도 안보는 분들께 추천! 한글 자음 순서대로, 각 자음으로 시작하는 CSS 속성들에 대해 부담없이 알아보는 빔캠프의 동영상 강의. 라이브 코딩을 구경하며 CSS에 대해서 조금씩, 조금씩 알아갈 수 있습니다. CSS는 디자이너들의

programmers.co.kr

 

반응형