링크를 가운데에 맞추는 방법에는 두 가지가 있습니다.
이 기사에서는 링크를 중앙에 배치하는 두 가지 방법을 모두 설명합니다. 시작하겠습니다!
방법 1: text-align 속성을 사용하여 CSS의 중심 링크
HTML에서 링크를 중앙에 배치하기 위해 ' 텍스트 정렬 ' CSS의 속성. ' 텍스트 정렬 ” 속성은 왼쪽, 오른쪽, 가운데와 같은 텍스트의 정렬을 조정하고 정렬을 맞추는 데 활용됩니다.
통사론
text-align 속성의 구문은 다음과 같습니다.
텍스트 정렬 : 값
'대신에 값 ', 왼쪽, 오른쪽, 가운데, 양쪽 정렬 등의 텍스트 정렬을 설정할 수 있습니다.
이제 ' 텍스트 정렬 '를 사용하여 주어진 링크를 가운데 정렬합니다.
예시
웹 페이지의 링크를 가운데에 맞추기 위해
태그 내부에 HTML의 링크를 추가합니다. 그렇게 하려면 태그를 사용하여 하이퍼링크를 정의하고 필요한 사이트 주소를 제공합니다. 그런 다음 링크의 이름을 지정합니다. 우리의 경우 Linuxhint 웹사이트에 대한 링크를 추가했습니다.HTML
< 신체 >< ㅏ href = 'https://linuxhint.com/' > 리눅스 < / ㅏ >
< / 신체 >
아래 제공된 이미지는 기본적으로 왼쪽에 위치하는 링크가 추가되었음을 나타냅니다.
이제 CSS로 이동하여 링크를 중앙에 배치합니다.
여기서 우리는 ' ㅏ '를 클릭하여 추가된 링크에 액세스합니다. 그런 다음 text-align의 값을 ' 센터 '로 표시하고 ' 차단하다 '. 결과적으로 요소는 새 줄에서 시작하여 전체 너비를 차지하는 블록 요소로 추가됩니다.
CSS
ㅏ {텍스트 정렬 : 센터 ;
표시하다 : 차단하다 ;
}
메모: CSS text-align 속성은 단독으로 태그 중앙에 작동하지 않습니다. 따라서 ' 표시하다 ' 속성 및 값 설정 ' 차단하다 '를 클릭하여 링크를 중앙에 배치합니다.
이제 HTML로 이동하여 실행하면 다음과 같은 결과를 볼 수 있습니다. 여기에서 링크가 웹페이지 중앙에 정렬된 것을 볼 수 있습니다.
두 번째 방법으로 링크를 중앙에 정렬하는 방법으로 이동해 보겠습니다.
방법 2: 'margin' 속성을 사용하여 CSS에서 중앙 링크
CSS에서 ' 여유 ' 속성은 링크를 중앙에 배치하는 데 활용됩니다. '의 약식 속성입니다. 여백-왼쪽 ', ' 여백 오른쪽 ', ' 마진 탑 ', 그리고 ' 여백-하단 ' 속성. 주어진 모든 속성의 값을 한 줄에 설정할 수 있습니다.
통사론
마진 속성의 구문은 다음과 같습니다.
여유 : 자동 | 맨 위 오른쪽 맨 아래 왼쪽위에서 제공한 구문에 대한 설명은 다음과 같습니다.
- 자동: 브라우저에 따라 요소를 설정하는 데 사용됩니다.
- 맨 위: 상단에서 여백을 설정하는 데 사용됩니다.
- 오른쪽: 오른쪽에서 여백을 설정하는 데 사용됩니다.
- 단추: 바닥에서 여백을 설정하는 데 사용됩니다.
- 왼쪽: 왼쪽에서 여백을 설정하는 데 사용됩니다.
메모: 두 값을 지정하면 위쪽과 아래쪽의 여백과 왼쪽과 오른쪽의 여백을 나타냅니다. 그러나 하나의 값을 추가하면 여백이 네 면 모두에 적용됩니다.
' 여유 ' 재산.
예시
먼저 display 속성의 값을 ' 차단하다 '이고 너비는 ' 70픽셀 '. 그런 다음 margin 속성을 적용하고 값을 ' 자동 ':
ㅏ {표시하다 : 차단하다 ;
너비 : 70픽셀 ;
여유 : 자동 ;
}
메모: ' 표시하다 ' 그리고 ' 너비 ” 속성을 설정하는 데 필요합니다. 그렇지 않으면 ' 여유 '속성이 작동하지 않습니다. width 속성의 값은 디스플레이 화면의 해상도와 텍스트의 길이에 따라 설정할 수 있습니다.
주어진 이미지에서 링크가 중앙에 성공적으로 배치되었음을 알 수 있습니다.
그게 다야! 링크를 중앙에 배치하는 방법을 설명했습니다.
결론
' 텍스트 정렬 ' 그리고 ' 여유 ' 속성은 ' 표시하다 ' 그리고 ' 너비 ' 재산. display 속성은 text-align 속성과 함께 필요하며 margin 속성을 사용하는 경우 display 속성과 width 속성은 링크의 중앙에 필수입니다. 이 가이드에서는 CSS에서 링크를 중앙에 배치하는 다양한 방법에 대해 설명했습니다.