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