728x90
반응형
중앙 정렬 레이아웃
중앙 정렬 하고싶은 데이터 태그에 width + margin: 0 auto
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
margin: 0 auto;
width: 900px;
}
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<h2>Lorem ipsum dolor sit amet consectetur...</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elit</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elit</p>
</body>
</html>
Lorem ipsum
Lorem ipsum dolor sit amet consectetur...
Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elit
Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elit
728x90
반응형
'HTML／CSS／JS' 카테고리의 다른 글
| [JS] 현재 시간 출력, if문 오전 오후 구분하기 (date(),getMonth(),getHours(),if,else) (0) | 2022.10.18 |
|---|---|
| [HTML5] 14. 글자 생략 (ellipsis) (0) | 2022.10.18 |
| [HTML5] 12. 수평 정렬 레이아웃 (overflow, hidden,float) (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 |
