HTML에서 여러 링크를 중앙에 배치

1. <center> HTML 태그를 사용하여 여러 HTML 링크를 중앙에 배치
2. text-align: center CSS 속성을 사용하여 여러 HTML 링크를 중앙에 배치

이 기사에서는 하나 이상의 HTML 링크를 중앙에 배치하는 방법을 알려줍니다. HTML에서는 <a> 태그를 사용하여 링크를 생성하고 URL을 src 속성에 할당할 수 있습니다.

<center> HTML 태그를 사용하여 여러 HTML 링크를 중앙에 배치

HTML에서 요소를 중앙에 배치하는 가장 간단한 방법은 <center> 태그입니다. 중앙에 표시해야 하는 <center> </center> 태그 안에 모든 요소를 넣을 수 있습니다.

예를 들어 4개의 링크를 생성하고 <center> 태그 안에 삽입하여 중앙에 렌더링했습니다.

HTML 코드:

<center>
    <a  href="#">About Us</a>
    <a  href="#">Contact Us</a>
    <a  href="#">HTML</a>
    <a  href="#">CSS</a>
</center>

위 출력에서 사용자는 모든 링크가 웹 페이지 중간에 나타나는 것을 볼 수 있습니다.

text-align: center CSS 속성을 사용하여 여러 HTML 링크를 중앙에 배치

CSS의 text-align 속성을 사용하여 HTML 요소를 중앙에 배치할 수도 있습니다.

아래 예에서는 4개의 링크를 만들어 <div> 요소 내에 추가했습니다. 다음으로 text-align: center CSS 속성을 <div> 요소에 적용하여 모든 <div> 요소를 중앙에 배치합니다.

HTML 코드:

<div>
    <a  href="#">Link 1</a>
    <a  href="#">Link 2</a>
    <a  href="#">Link 3</a>
    <a  href="#">Link 4</a>
</div>

CSS 코드:

div{
    text-align: center;
}

사용자가 단일 열에 모든 링크를 한 줄씩 표시하려는 경우 <div> 요소 스타일에 display: flex 및 flex-direction: column CSS 속성을 추가할 수 있습니다.

HTML 코드:

<div>
    <a  href="#">Link 1</a>
    <a  href="#">Link 2</a>
    <a  href="#">Link 3</a>
    <a  href="#">Link 4</a>
</div>

CSS 코드:

div{
    display: flex;
    flex-direction: column;
    text-align: center;
}

위의 출력에서 사용자는 모든 링크가 단일 열에 나타나고 열이 화면 중앙에 나타나는 것을 관찰할 수 있습니다.