탐색 메뉴의 수평 중앙 정렬을 달성하기 위한 CSS의 다섯 가지 방법에 대한 자세한 예

웹 디자인에서는 수평 탐색 메뉴가 널리 사용됩니다. CSS 스타일에서는 이를 해결하기 위해 일반적으로 Float 요소나 "display:inline-block"을 사용합니다. 오늘은 너비를 알 수 없는 요소를 중심에 두는 방법을 주로 설명하겠습니다. 아래에서는 가로 중심 문제를 해결하는 몇 가지 방법을 나열합니다. 물론 이러한 방법은 탐색 메뉴 문제를 해결하는 데 반드시 사용되는 것은 아니며 다른 유사한 상황에서도 사용할 수 있습니다.

CSS 탐색 메뉴를 가로로 가운데 맞추는 여러 가지 방법:

• 방법 1: 디스플레이:inline-block

• 방법 2: 위치:상대

• 방법 3: 디스플레이:테이블

• 방법 4 ： display:inline-flex

• 방법 5: width:fit-content / width:intrinsic

방법 1: display:inline-block

이 방법은 비교적 간단합니다. 컨테이너를 "display"로 변환하는 것입니다. :inline -block" 인라인 블록 수준 요소를 선택한 다음 "text-align:center"를 직접 사용하여 수평 중앙 정렬을 구현할 수 있습니다.

HTML 코드:

여기서 이 탐색 메뉴를 둘러싸려면 p가 필요합니다.

<p class="navbar">
    <ul>
        <li><a href="/">首页</a></li>
        …
    </ul>
</p>

CSS 코드:

외부 p에 "text-align:center"를 추가한 다음 메뉴 컨테이너를 "display:inline-block" 인라인 블록 수준 요소로 설정하면 메뉴가 left with "float:left"

.navbar {
    text-align:center;
}
.navbar ul {
    display:inline-block;
}
.navbar li {
    float:left;
}
.navbar li + li {
    margin-left:20px;
}

여기의 브라우저는 IE8 이상에서만 호환되므로 IE7과 호환되기를 원하시면 다음 코드를 추가해주세요

.navbar ul {
    display:inline;
    zoom:1;
}

방법 2: position:relative

이것은 요소를 수평 중앙에 배치하려면 "위치:상대" 위치 지정 방법을 사용하세요. 코드에 이를 마무리하는 추가 p가 있기 때문에 이 방법은 실제로 권장하지 않습니다. 물론 이러한 방법은 상황에 따라 사용됩니다.

HTML 코드:

<p class="navbar">
    <p>
        <ul>
            <li><a href="/">首页</a></li>
            …
        </ul>
    </p>
</p>

CSS 코드:
위치 지정 p를 부동으로 설정한 다음 "왼쪽:50%" 위치를 지정하고 "왼쪽:-50%"로 이동합니다. 표현이 명확하지 않을 수도 있으니 직접 코드를 읽어보세요^^

.navbar {
    overflow:hidden;
}
.navbar > p {
    position:relative;
    left:50%;
    float:left;
}
.navbar ul {
    position:relative;
    left:-50%;
    float:left;
}
.navbar li {
    float:left;
}
.navbar li + li {
    margin-left:20px;
}

IE7과 호환되기를 원하시면 다음 스타일을 추가해주세요:

.navbar {
    position:relative;
}

방법 3: display:table

간결한 코드를 좋아하신다면, 그렇다면 이 방법이 매우 적합합니다. 알겠습니다.

HTML 코드:

<ul class="navbar">
    <li><a href="/">Home</a></li>
    …
</ul>

CSS 코드:

.navbar {
    display:table;
    margin:0 auto;
}
.navbar li {
    display:table-cell;
}
.navbar li + li {
    padding-left:20px;
}

브라우저 호환성: 이 방법은 코드가 간소화되었지만 IE7 이하는 지원하지 않습니다...

방법 4: 디스플레이: inline-flex

Flex 레이아웃에 대한 지식을 직접 확인하세요>_

HTML 코드:

<p class="navbar">
    <ul>
        <li><a href="/">Home</a></li>
        …
    </ul>
</p>

CSS 코드:

.navbar {
    text-align:center;
}
.navbar > ul {
    display:-webkit-inline-box;
    display:-moz-inline-box;
    display:-ms-inline-flexbox;
    display:-webkit-inline-flex;
    display:inline-flex;
}
.navbar li + li {
    margin-left:20px;
}

브라우저 호환성: IE7 이하의 IE 브라우저는 지원하지 않습니다.

방법 5: 너비:fit-content

HTML 코드:

<p class="navbar">
    <ul>
        <li><a href="/">首页</a></li>
        …
    </ul>
</p>

CSS 코드:

.navbar {
    text-align:center;
}
.navbar > ul {
    display:-webkit-inline-box;
    display:-moz-inline-box;
    display:-ms-inline-flexbox;
    display:-webkit-inline-flex;
    display:inline-flex;
}
.navbar li + li {
    margin-left:20px;
}

브라우저 호환성: 이 호환성은 상대적으로 낮으며 Firefox 또는 Chrome, Opera 12 및 기타 최신 버전만 지원합니다. 브라우저.

마지막에 작성: 방법 1: display:inline-block은 간단하고 이해하기 쉽습니다.

위 내용은 탐색 메뉴의 수평 중앙 정렬을 달성하기 위한 CSS의 다섯 가지 방법에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!