작가:
Mark Sanchez
창조 날짜:
6 1 월 2021
업데이트 날짜:
1 칠월 2024
![CSS3: HTML 요소를 중앙정렬하기](https://i.ytimg.com/vi/ZMMLETgq638/hqdefault.jpg)
콘텐츠
기인하다 맞추다 꼬리표 HTML> HTML5부터 더 이상 사용되지 않습니다. 이 속성은 여전히 대부분의 웹 브라우저에서 작동하지만 CSS(Cascading Style Sheets)를 사용하여 이미지를 정렬하는 것이 좋습니다. 이 기사에서는 CSS와 더 이상 사용되지 않는 태그를 사용하여 이미지를 중앙에 배치하는 방법을 보여줍니다. 맞추다.
단계
방법 1/2: CSS(권장)
1 이미지에 대한 HTML 코드를 추가합니다. CSS(Cascading Style Sheet)를 사용하여 이미지를 정렬하지만 HTML을 사용하여 페이지에 배치해야 합니다. 다음은 태그를 사용하는 예입니다. 이미지> 코드에 이미지를 삽입하려면:
img src = "dog.webp" alt = "이것은 개 사진입니다">
- 대신에 개.webp 이미지 파일의 이름을 대체하고 "alt" 뒤에 이미지 설명을 입력합니다. 의미 센터 "class"의 경우 해당 이름으로 CSS 클래스를 생성하므로 변경하지 마십시오.
2 CSS 코드를 찾습니다. 사이트에 별도의 CSS 파일이 있는 경우 해당 파일을 엽니다. 그렇지 않은 경우 CSS는 HTML 파일 상단의 태그 내부에 있을 가능성이 큽니다. 머리>... 파일 상단으로 스크롤하여 태그 찾기 스타일> / 스타일>.
- 태그인 경우 스타일> / 스타일> 아니, 추가하십시오. 자세한 내용은 이 기사를 읽어보세요.
3 CSS를 추가하여 이미지를 정렬합니다. "50%" 대신 다른 값을 입력하여 페이지에 이미지를 표시할 수 있습니다. "100%" 값으로 이미지를 중앙에 배치할 수 없으므로 이 숫자는 달라야 합니다.
.center {디스플레이: 블록; 여백-왼쪽: 자동; 오른쪽 여백: 자동; 너비: 50%; }
4 변경 사항을 저장합니다. HTML 파일과 CSS 파일(있는 경우)을 저장합니다. 그러면 이미지가 중앙에 배치됩니다.
- 또한 내부 태그 이미지> 추가할 수 있습니다 다른 이미지를 중앙에 배치합니다.
방법 2/2: HTML의 "align" 속성
1 새 단락을 만듭니다. 이미지를 가운데에 맞추는 이 방법은 더 이상 사용되지 않지만 여전히 많은 브라우저에서 작동합니다. 그러나 브라우저가 지정된 속성 지원을 중단할 때 사이트 기능을 유지하려면 CSS를 사용하는 것이 좋습니다. 속성을 기억하십시오 맞추다 그림을 둘러싸는 요소 내부에만 그림을 중앙에 배치합니다(예: 태그 내부 피> / 피> 또는 div> / div>). 예를 들어 HTML 파일에서 다음을 추가하여 새 단락을 만듭니다. 피> 별도의 라인에.
2 이미지에 대한 HTML 코드를 추가합니다. 태그 뒤에 다음 코드를 입력하세요. 피>... 이 예를 지침으로 사용하십시오.
p> img src = "dog.webp" alt = "그림" 정렬 = "중간">
- 대신에 개.webp 이미지 파일의 이름을 대체하고 "alt" 뒤에 이미지 설명을 입력합니다.
- 중간 속성은 브라우저에 페이지 중앙에 그림을 표시하도록 지시합니다.
3 단락 태그를 닫습니다. 이렇게 하려면 추가 / 피> 사진 태그 뒤에. 완성된 코드는 다음과 같아야 합니다.
p> img src = "dog.webp" alt = "그림" 정렬 = "중간"> / p>
4 변경 사항을 저장합니다. 그러면 이미지가 중앙에 배치됩니다.