Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

제뉴어리의 모든것

div 영역 안에 div를 가로로 나열하여 배치하고 가운데 정렬하기 본문

css

div 영역 안에 div를 가로로 나열하여 배치하고 가운데 정렬하기

제뉴어리맨 2022. 6. 4. 12:53

 

 

<!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">
    
    <style>
        
        #container {
            background-color: gray;
            width: 1000px;
            height: 600px;
            border: 2px solid blue;
            margin: 0 auto; /* container 영역을 브라우저에서 가운데 정렬하기 위해 auto설정 */
            text-align: center; /* inline-block화 된 div들을 텍스트 마냥 center로 정렬*/
        }

        #container div{
            display: inline-block; /* 가로로 나열하기 위해 block레벨 요소를 inline-block레벨로 전환 */
            width: 200px; /* 영역 크기 지정 안해주면 inline 레벨처럼 내용물 만큼만 차지하기 때문에 크기 지정 */
            height: 200px; /* 영역 크기 지정 안해주면 inline 레벨처럼 내용물 만큼만 차지하기 때문에 크기 지정 */
            border: 2px solid aqua;
            background: orange;
        }
    </style>

    <title>Document</title>
</head>
<body>
    <div id="container">
        <div>
           첫번째
        </div>
        <div>
           두번째
        </div>    
    </div>
    
</body>
</html>

 

 

결과 화면

'css' 카테고리의 다른 글

float의 기본 개념  (0) 2022.06.05
[HTML&CSS] 블록 레벨, 인라인 레벨 요소 (Block Level Element, Inline Level Element)  (0) 2022.06.05
[CSS] display - block과 inline 그리고 inline-block  (0) 2022.06.04
특정위치 자식 요소 선택하기 first-child  (0) 2022.06.04
perspective 주의점.  (0) 2022.05.14
'css' Related Articles more