HTML에서 양식 중앙에 맞추기

Rajeev Baniya 2023년2월19일

HTML HTML Alignment HTML Form

이 기사에서는 HTML에서 양식을 중앙에 배치하는 방법을 소개합니다.

CSS `margin` 속성을 사용하여 HTML에서 양식 중앙에 배치

margin CSS 속성을 사용하여 HTML에서 양식을 가운데에 맞출 수 있습니다.

스타일은 form 태그에 인라인 CSS로 작성할 수 있습니다. margin 속성은 컨테이너와 인접 요소 사이의 공간을 정의합니다.

먼저 속성의 여백을 설정하는 값을 제공할 수 있습니다. 단일 값을 사용하는 경우 값은 컨테이너의 네 방향 모두에 적용됩니다.

다음으로 margin 속성에 auto 값을 사용하여 양식을 가운데에 맞출 수 있습니다. 이를 위해 우리는 주어진 너비로 중앙에서 조정할 양식의 width를 제공해야 합니다.

auto 값은 왼쪽과 오른쪽에서 나머지 거리를 균등하게 분할합니다.

예를 들어 form 태그를 만들고 그 안에 style 속성을 작성합니다. 스타일 속성에서 margin 속성을 auto로, width 속성을 220px로 설정합니다.

다음으로 text의 input 태그와 submit의 또 다른 input 태그를 만듭니다.

아래 예에서는 가운데에 있는 양식을 만듭니다. 폼의 너비는 220px이고 나머지 공간은 왼쪽과 오른쪽 여백으로 나뉩니다.

이런 식으로 HTML에서 CSS를 사용하여 margin:auto로 가운데 정렬된 양식을 만들 수 있습니다.

예제 코드:

<form style="margin: auto; width: 220px;">
    Enter name:<input type="text" />
    <input type="submit" value="Submit"/>
</form>

text-align 속성을 사용하여 CSS에서 텍스트의 정렬을 지정합니다. 속성을 form 태그의 인라인 스타일로 사용하여 양식 정렬을 설정할 수 있습니다.

text-align 속성은 left, right, center, justify 등과 같은 값을 사용합니다. 값을 center로 설정하여 양식을 가운데에 맞출 수 있습니다.

예를 들어 text-align 속성을 style 속성의 form 태그에 적용하고 속성을 center로 설정합니다. 다음으로 text 유형의 input 태그를 만든 다음 submit을 생성합니다.

아래 예에서는 양식의 모든 내용을 가운데에 배치합니다. 그러나 여백이 지정되지 않았기 때문에 양식이 전체 블록을 차지합니다.

이런 식으로 HTML에서 양식을 가운데에 맞출 수 있습니다.

예제 코드:

<form style="text-align: center; ">
    Enter name:<input type="text"/> <br><br>
    <input type="submit" value="Submit"/>
</form>

폼의 너비를 뷰포트 너비의 50%로 설정한 다음 너비의 25%를 왼쪽 여백으로 제공할 수 있습니다. width 및 margin-left CSS 속성을 사용하여 너비와 여백을 설정하고 목표를 달성할 수 있습니다.

마지막으로 vw 단위를 사용하여 길이를 지정할 수 있습니다. 예를 들어 form 태그의 style 속성으로 width를 50vw로 설정하고 margin-left를 25vw로 설정합니다.

여기서 50vw 값은 뷰포트 너비의 50%를 차지하고 25vw 값은 왼쪽 여백으로 뷰포트 너비의 25%를 제공합니다. 나머지 25% 공간은 양식 오른쪽에 있습니다.

이런 식으로 HTML에서 양식을 가운데에 맞출 수 있습니다.

예제 코드:

<form style=" width: 50vw; margin-left : 25vw;">
    Enter name:<input type="text"/> <br><br>
    <input type="submit" value="Submit"/>
</form>