코딩헤딩

html 중앙정렬 본문

HTML | CSS

html 중앙정렬

멈머이 2023. 10. 2. 16:33
728x90

처음 모습

<body>
    <div class="back">
        <h1 class="text"> HTML </h1>
        <button type="submit" id="btnSubmit"> 버튼 </button>
    </div>
</body>

<style>
    body{
        background-color: green;
    }
    .back {
        background-color: red;
    }
</style>

 

1. 빨간 부분인 div를 html 의 중앙으로 옮겨준다.

div가 중앙으로 정렬된 모습.

<body>
    <div class="back">
        <h1 class="text"> HTML </h1>
        <button type="submit" id="btnSubmit"> 버튼 </button>
    </div>
</body>

<style>
    body{
        background-color: green;
    }

    .back {
        background-color: red;
    }

    .back{
        width: 500px;
        margin: auto;
    }
</style>

 

 

2. h1 테그 안의 HTML 글자를 중앙으로 정렬

HTML글자가 중앙으로 정렬된 모습.

<body>
    <div class="back">
        <h1 id="text"> HTML </h1>
        <button type="submit" id="btnSubmit"> 버튼 </button>
    </div>
</body>

<style>
    body{
        background-color: green;
    }

    .back {
        background-color: red;
    }

    .back{
        width: 500px;
        margin: auto;
    }

    #text{
        width: fit-content;
        margin: auto;
    }
</style>

 

3. 버튼을 div태그의 중앙으로 정렬

마지막으로 버튼까지 중앙으로 정렬된 모습.

<body>
    <div class="back">
        <h1 id="text"> HTML </h1>
        <button type="submit" id="btn"> 버튼 </button>
    </div>
</body>

<style>
    body{
        background-color: green;
    }

    .back {
        background-color: red;
    }

    .back{
        width: 500px;
        margin: auto;
    }

    #text{
        width: fit-content;
        margin: auto;
    }

    #btn{
        width: 200px;
        margin: auto;
        display: block;
    }
</style>

주의할 점

태그 선택자 사용시 매칭시켜줄것

중앙정렬하고싶은 대상의 넓이 지정후 margin을 auto로

버튼을 중앙정렬시 display는 block으로!!!

728x90

'HTML | CSS' 카테고리의 다른 글

[CSS]부드럽게 깜빡이는 그림자  (0) 2024.01.19
[CSS] background-color 반투명 및 그라데이션 효과  (0) 2024.01.19
드롭다운 상단 메뉴바 만들기  (0) 2023.10.03
'HTML | CSS' Related Articles more