728x90
반응형
수평 정렬의 규칙
: 자식에게 float 속성 지정, 부모에게 overflow: hidden 속성 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>수평정렬 레이아웃</title>
<style>
.container {
overflow: hidden;
}
.item {
float: left;
margin: 0 3px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
<div class="container">
<div class="item">메뉴 - 1</div>
<div class="item">메뉴 - 2</div>
<div class="item">메뉴 - 3</div>
<div class="item">메뉴 - 4</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</body>
</html>
Lorem ipsum dolor sit amet consectetur adipisicing elit
메뉴 - 1
메뉴 - 2
메뉴 - 3
메뉴 - 4
Lorem ipsum dolor sit amet consectetur adipisicing elit
만약 hidden: overflow를 적용하지 않는다면 아래처럼 됨
728x90
반응형
'HTML／CSS／JS' 카테고리의 다른 글
| [HTML5] 14. 글자 생략 (ellipsis) (0) | 2022.10.18 |
|---|---|
| [HTML5] 13. 중앙 정렬 레이아웃 (margin,width) (0) | 2022.10.18 |
| [HTML5] 10. 배경/ 글자 속성 (background,font-family,text-decoration 등) (0) | 2022.10.17 |
| [HTML5] 09. 가시속성 display (none,block,inline,inline-block) (0) | 2022.10.17 |
| [HTML5] 08. 박스속성 (margin, padding) (0) | 2022.10.17 |
