CSS는 주로 HTML 웹 페이지에 최상의 스타일을 제공하는 데 사용됩니다. CSS를 사용하면 페이지의 요소 배열을 지정할 수 있습니다.

웹페이지 중앙에 버튼을 정렬하는 방법은 다양합니다. 버튼을 수평뿐만 아니라 수직으로도 정렬할 수 있습니다. 다음 방법을 사용하여 버튼을 중앙에 배치할 수 있습니다.

텍스트 정렬: 가운데- 상위 div 태그의 text-align 속성 값을 가운데로 설정합니다.여백: 자동- 여백 속성 값을 자동으로 설정합니다.디스플레이: 플렉스- 표시 속성의 값을 flex로 설정하고 정당화 내용 재산 센터 .디스플레이: 그리드- 표시 속성의 값을 그리드로 설정합니다.

몇 가지 그림을 사용하여 위의 방법을 이해해 보겠습니다.

예

이 예에서는 텍스트 정렬 속성을 설정하고 해당 값을 센터 . body 태그나 요소의 상위 div 태그에 배치할 수 있습니다.

여기에 우리는 텍스트 정렬: 중앙; 버튼 요소의 상위 div 태그에 있습니다.

 Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me 

산출

예

이 예에서는 디스플레이: 그리드; 재산, 그리고 여백: 자동차; 재산. 여기에 우리는 디스플레이: 그리드; 버튼 요소의 상위 div 태그에 있습니다.

연결 자바 문자열

버튼은 수평 및 수직 위치의 중앙에 배치됩니다.

 Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: grid; } button { background-color: lightblue; color: black; font-size: 25px; margin: auto; } p{ font-size: 25px; } Click me <p>In this example we are using the <b> display: grid; </b> and <b> margin: auto;</b> properties</p> 

산출

예

버튼을 중앙에 배치한 또 다른 예입니다. 이 예에서는 디스플레이: 플렉스; 재산, 내용 정당화: 센터; 재산, 그리고 항목 정렬: 중앙; 재산.

이 예는 버튼을 수평 및 수직 위치의 중앙에 배치하는 데 도움이 됩니다.

 Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: flex; justify-content: center; align-items: center; } button { background-color: lightblue; color: black; font-size: 25px; } Click me 

산출