탐색 모음이 축소될 때 이미지를 중앙에 배치하는 방법은 무엇입니까?
P粉647504283
2023-08-18 11:05:33
<p>웹사이트(https://github.com/learning-zone/website-templates/tree/master/victory-educational-institution-free-html5-bootstrap-template)를 구축하기 위해 템플릿을 사용하고 있습니다. 원본 탐색 표시줄은 다음과 같습니다. </p>
<p>줄이기 전:
탐색 표시줄</p>
<p>축소 후:
탐색 표시줄</p>
<p>로고를 제 로고로 바꿨습니다. 로고가 세로 방향으로 작기 때문에 여백을 10px에서 20px로 변경했습니다</p>
<pre class="brush:php;toolbar:false;">.logo {
너비: 40%;
여백: 20px 0px 20px 0;
}</pre>
<p>중앙에 있는 것처럼 보입니다.
탐색 표시줄</p>
<p>하지만 페이지를 아래로 스크롤하면 탐색 표시줄이 줄어들고 로고가 수직 중앙에 유지되지 않습니다. 위로 움직입니다.
탐색 표시줄</p>
<p>CSS를 수정하려고 했는데 작동하지 않았습니다</p>
<pre class="brush:php;toolbar:false;">.logo {
디스플레이: 플렉스;
내용 정당화: 센터;
항목 정렬: 중앙;
너비: 40%;
여백: 20px 0px 20px 0;
}</pre>
<p>로고의 HTML 코드입니다</p>
<pre class="brush:php;toolbar:false;"><div class="logo smooth-scroll">
<a href="#banner"><img id="logo" src="images/boxinghub.png" alt="boxinghub 로고"></a>
<p>CSS의 코드는 축소 시 위치를 제어하지만 .logo 또는 #logo를 추가해도 도움이 되지 않습니다. </p>
<pre class="brush:php;toolbar:false;">@media (최소 너비:768px) {
.fixed-header-on .navbar-default .navbar-nav >
패딩 상단: 20px;
패딩 하단: 20px;
}
}</pre>
<p>도움을 주셔서 미리 감사드립니다! </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
백그라운드 방법을 사용할 수 있습니다. 배경 위치처럼:center