HTML에서 이미지를 가운데에 맞추는 방법

작가: Mark Sanchez
창조 날짜: 6 1 월 2021
업데이트 날짜: 1 칠월 2024
Anonim
CSS3: HTML 요소를 중앙정렬하기
동영상: CSS3: HTML 요소를 중앙정렬하기

콘텐츠

기인하다 맞추다 꼬리표 HTML> HTML5부터 더 이상 사용되지 않습니다. 이 속성은 여전히 ​​대부분의 웹 브라우저에서 작동하지만 CSS(Cascading Style Sheets)를 사용하여 이미지를 정렬하는 것이 좋습니다. 이 기사에서는 CSS와 더 이상 사용되지 않는 태그를 사용하여 이미지를 중앙에 배치하는 방법을 보여줍니다. 맞추다.

단계

방법 1/2: CSS(권장)

  1. 1 이미지에 대한 HTML 코드를 추가합니다. CSS(Cascading Style Sheet)를 사용하여 이미지를 정렬하지만 HTML을 사용하여 페이지에 배치해야 합니다. 다음은 태그를 사용하는 예입니다. 이미지> 코드에 이미지를 삽입하려면:

    img src = "dog.webp" alt = "이것은 개 사진입니다">

    • 대신에 개.webp 이미지 파일의 이름을 대체하고 "alt" 뒤에 이미지 설명을 입력합니다. 의미 센터 "class"의 경우 해당 이름으로 CSS 클래스를 생성하므로 변경하지 마십시오.
  2. 2 CSS 코드를 찾습니다. 사이트에 별도의 CSS 파일이 있는 경우 해당 파일을 엽니다. 그렇지 않은 경우 CSS는 HTML 파일 상단의 태그 내부에 있을 가능성이 큽니다. 머리>... 파일 상단으로 스크롤하여 태그 찾기 스타일> / 스타일>.
    • 태그인 경우 스타일> / 스타일> 아니, 추가하십시오. 자세한 내용은 이 기사를 읽어보세요.
  3. 3 CSS를 추가하여 이미지를 정렬합니다. "50%" 대신 다른 값을 입력하여 페이지에 이미지를 표시할 수 있습니다. "100%" 값으로 이미지를 중앙에 배치할 수 없으므로 이 숫자는 달라야 합니다.

    .center {디스플레이: 블록; 여백-왼쪽: 자동; 오른쪽 여백: 자동; 너비: 50%; }

  4. 4 변경 사항을 저장합니다. HTML 파일과 CSS 파일(있는 경우)을 저장합니다. 그러면 이미지가 중앙에 배치됩니다.
    • 또한 내부 태그 이미지> 추가할 수 있습니다 다른 이미지를 중앙에 배치합니다.

방법 2/2: HTML의 "align" 속성

  1. 1 새 단락을 만듭니다. 이미지를 가운데에 맞추는 이 방법은 더 이상 사용되지 않지만 여전히 많은 브라우저에서 작동합니다. 그러나 브라우저가 지정된 속성 지원을 중단할 때 사이트 기능을 유지하려면 CSS를 사용하는 것이 좋습니다. 속성을 기억하십시오 맞추다 그림을 둘러싸는 요소 내부에만 그림을 중앙에 배치합니다(예: 태그 내부 피> / 피> 또는 div> / div>). 예를 들어 HTML 파일에서 다음을 추가하여 새 단락을 만듭니다. 피> 별도의 라인에.
  2. 2 이미지에 대한 HTML 코드를 추가합니다. 태그 뒤에 다음 코드를 입력하세요. 피>... 이 예를 지침으로 사용하십시오.

    p> img src = "dog.webp" alt = "그림" 정렬 = "중간">

    • 대신에 개.webp 이미지 파일의 이름을 대체하고 "alt" 뒤에 이미지 설명을 입력합니다.
    • 중간 속성은 브라우저에 페이지 중앙에 그림을 표시하도록 지시합니다.
  3. 3 단락 태그를 닫습니다. 이렇게 하려면 추가 / 피> 사진 태그 뒤에. 완성된 코드는 다음과 같아야 합니다.

    p> img src = "dog.webp" alt = "그림" 정렬 = "중간"> / p>

  4. 4 변경 사항을 저장합니다. 그러면 이미지가 중앙에 배치됩니다.