ul 목록을 사용하여 페이지 탐색을 중앙에 맞추는 방법은 무엇입니까?
P粉052686710
2023-08-13 11:06:53
<p>이것은 평면상 수상평형과 垂直居中ul의 列表中的导航?</p>
<p>以下是HTML과 CSS代码</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.nav{
너비: 100%;
높이: 100%;
위치: 고정;
배경색: 흰색;
오버플로: 숨김;
}
.메뉴 a{
패딩: 30px;
검정색;
텍스트 정렬: 중앙;
왼쪽: 0;
여백: 0 자동;
플렉스: 없음;
디스플레이: 플렉스;
항목 정렬: 중앙;
내용 정당화: 센터;
}</pre>
<pre class="brush:html;toolbar:false;"><nav class="nav">
<ul class="메뉴">
<li><a href="#">Google 스토어</a></li>
<li><a href="#">Google 검색</a> </li>
<li><a href="#">스포티파이</a></li>
<li><a href="#">Spotify 블로그</a></li>
<li><a href="#">정사각형
<p><br /></p>
<p>저는 CSS의 flex 메소드를 사용하여 플렉스를 사용했습니다.</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
항목 자체가 아닌 항목이 포함된 컨테이너에 Flexbox 속성을 적용해야 합니다.
이렇게 하면 ul이 .nav 컨테이너에서 수평 및 수직 중앙에 배치됩니다.