기본적으로 이미지와 제목이 화면 중앙에 오도록 해야 하지만, 이미지를 클릭하고 링크를 열 수도 있어야 합니다. 이 작업을 수행할 수 있는 올바른 코드가 있다고 생각하지만 여전히 두 가지 문제가 있습니다. 이미지도 두 가지 크기로 제공되므로 어려워집니다. 방금 원래 크기에 비해 빨간 알약은 더 작게, 파란색 알약은 더 크게 만들어 보았습니다.
다른 3개 이미지의 배경 키프레임은 걱정하지 마세요. 제목과 빨간색 및 파란색 알약 이미지를 중앙에 배치하는 데 도움이 필요합니다.
온라인 코드를 사용해 보았지만 여전히 같은 오류가 발생합니다. 이미지 크기를 다른 크기로 조정하고 다양한 센터링 기술을 시도했지만 작동하지 않는 것 같습니다.
으아악 으아악
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
목표를 짐작할 수 있지만 이미지 컨테이너를 중앙 정렬할 필요는 없나요?
#background선택기에서 이 작업을 수행했습니다.그런 다음 크기 조정 책임을 앵커로 옮기고 표시 속성을
inline-block로 설정했습니다. 이로 인해 이미지 전체가 포함됩니다(앵커 태그가 포함 요소의 높이와 너비를 사용하지 않는 이유 참조). 또한 이미지의 최대 너비를 100%로 설정했습니다. 인라인 스타일은 비효율적이고 피해야 하기 때문에 이 모든 작업은 CSS에서 수행됩니다.이미지 크기는 다양합니다. CSS를 사용하여 여러 가지 방법으로 이를 처리할 수 있지만 가장 좋은 해결책은 일치하도록 크기를 조정하는 것입니다. 큰 사이즈를 작은 사이즈와 같은 사이즈로 줄이겠습니다.
참고로 스타일 요소는 머리와 몸 요소 외부에 있습니다. 잘못된 HTML입니다. head 요소 안에 넣으세요.
또한 중앙 요소 는 오랫동안 사용되지 않았으므로 사용하면 안 됩니다.