vertical-align와 text-align CSS 활용하여 정렬하기
텍스트를 가로정렬과 세로정렬을 알아보도록 하겠습니다. CSS의 텍스트 정렬에는 vertical-align(세로정렬)과 text-align(가로정렬)가 있는데 우선 vertical-align 은 요소들 간의 세로정렬을 조절하는 CSS입니다. block에는 적용이 되지 않고 inline에만 가능합니다.
<span> 태그가 아닌 <div> html에서 적용하려면 display : table-cell을 적용해서 inline으로 변경해야 합니다. <div> 요소가 줄 바꿈이 되지 않고 옆으로 정렬된 것은 inline 으로 바뀐 것입니다.
text-align 을 이용해서 마지막 text4번 속성에 left, right, center, justify 를 이용해서 정리하면 보다 디테일 하게 정리 가능합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <style type="text/css"> body { font-family:Verdana, Geneva, sans-serif; background-color: #e7e7e7; } div { width: 25%; height: 100px; padding: 5px; border: 3px solid; border-color: #fff; color: #FFF; background-color: #3CF; display: table-cell; } #text1 {vertical-align: top;} #text2 {vertical-align: middle;} #text3 {vertical-align: bottom;} #text4 {vertical-align: middle; text-align:center;} </style> | cs |
</head>
<body>
1 2 3 4 | <div id="text1">vertiacl-align 정렬 : top</div> <div id="text2">vertiacl-align 정렬 : middle</div> <div id="text3">vertiacl-align 정렬 : bottom</div> <div id="text4">vertiacl-align 정렬 : middle</br>text-align 높이정렬:center</div> | cs |
</body>
</html>
[홈페이지만들기] - html 창크기 조절(반응형코딩)
[홈페이지만들기] - ul li 가로정렬로 메뉴만들기 (css가로정렬)
'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글
CSS 링크의 color와 background-color (0) | 2017.02.13 |
---|---|
CSS style 컬러 기본설정 (0) | 2017.02.09 |
html 순서 및 목록 만들기 (2) | 2017.02.02 |
html 창크기 조절(반응형코딩) (7) | 2017.01.28 |
ul li 가로정렬로 메뉴만들기 (css가로정렬) (5) | 2017.01.27 |