HTML의 center 속성은 무엇입니까? HTML 텍스트 및 이미지 중앙 정렬에 대한 설명(예제 포함)-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML의 center 속성은 무엇입니까? HTML 텍스트 및 이미지 중앙 정렬에 대한 설명(예제 포함)

寻∝梦

Sep 03, 2018 pm 05:07 PM

align html img p

이 글에서는 HTML의 align 속성을 소개하고, align 속성이 텍스트를 가운데 정렬하는 방법과 HTML 정렬 속성이 이미지를 가운데 정렬하는 방법을 소개합니다. 그렇다면 이 글의 내용을 함께 살펴보겠습니다.

1 . 먼저 HTML의 centering 속성에 대해 이야기해 보겠습니다.

오늘 권장하는 것은 align 속성입니다. 이 기사에서는 주로 align 속성의 텍스트 및 이미지 사용을 소개합니다.

이제 전체 코드를 살펴보겠습니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
这是一段文字，没有任何的标签，看看我现在在哪
</body>
</html>

로그인 후 복사

이것은 간단한 코드이며 표시 효과는 그림과 같습니다.

HTML의 center 속성은 무엇입니까? HTML 텍스트 및 이미지 중앙 정렬에 대한 설명(예제 포함)

What you 태그 없이 구현되며 기본적으로 브라우저의 왼쪽 상단에 표시됩니다.

이제 위의 텍스트를 중앙에 배치하려면 어떻게 해야 할까요?

네, 글 초반에 소개해드린 align 속성입니다. 정렬 속성을 추가합니다.

이제 코드를 살펴보겠습니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<p align="center">这是一段文字，没有任何的标签，看看我现在在哪</p>
</body>
</html>

로그인 후 복사

텍스트 레이블은 원래 단락 p 태그로 요약되므로 여기서는 p 태그를 사용하고 center와 같은 정렬 속성을 추가합니다. 즉, p 태그의 모든 텍스트가 중앙에 표시됩니다. 효과의 스크린샷을 살펴보겠습니다.

HTML의 center 속성은 무엇입니까? HTML 텍스트 및 이미지 중앙 정렬에 대한 설명(예제 포함)

모두 브라우저 중앙에 표시됩니다.

이것은 HTML 정렬 속성을 사용하여 텍스트를 가운데 정렬하는 방법입니다. (자세한 내용을 보려면 여기 PHP 중국어 웹사이트의 HTML 온라인 비디오 튜토리얼이 있습니다)

둘째, 이제 align 속성을 사용하여 이미지를 중앙에 배치하는 방법을 살펴보겠습니다.

우리 모두 알고 있습니다. 이미지 태그가 HTML의 center 속성은 무엇입니까? HTML 텍스트 및 이미지 중앙 정렬에 대한 설명(예제 포함) 를 사용하므로 표시된 코드는 다음과 같습니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<p align="center">这是一段文字，没有任何的标签，看看我现在在哪</p>
<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/003/5b49b1f76ccb9475.jpg"  class="lazy"   alt="HTML의 center 속성은 무엇입니까? HTML 텍스트 및 이미지 중앙 정렬에 대한 설명(예제 포함)" >
</body>
</html>

로그인 후 복사

위 코드에 네트워크 이미지를 추가하고 이제 효과를 살펴보겠습니다.

HTML의 center 속성은 무엇입니까? HTML 텍스트 및 이미지 중앙 정렬에 대한 설명(예제 포함)

분명히, 이 이미지는 표시되는 브라우저의 기본 왼쪽 상단에 있습니다. 이제 img 태그에 align 속성을 추가해 보겠습니다.

<body>
<p align="center">这是一段文字，没有任何的标签，看看我现在在哪</p>
<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/003/5b49b1f76ccb9475.jpg"  class="lazy"   align="middle" alt="HTML의 center 속성은 무엇입니까? HTML 텍스트 및 이미지 중앙 정렬에 대한 설명(예제 포함)" >
</body>

로그인 후 복사

위에서 align 속성을 추가했는데 효과가 빠르게 변경되었습니다. 물론 이는 html4.01에서만 사용할 수 있습니다. 그래서 여기서는 사진을 보여드리지 않겠습니다. 모두가 이해할 수 있는 한.

HTML의 정렬 속성에 대한 이 글의 소개는 여기서 끝납니다. 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

HTML에 이미지를 추가하는 코드는 무엇인가요? HTML에 이미지 경로를 올바르게 추가하는 방법은 무엇입니까?

위 내용은 HTML의 center 속성은 무엇입니까? HTML 텍스트 및 이미지 중앙 정렬에 대한 설명(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.