HTML 코드에서 텍스트와 이미지를 중앙에 배치하는 방법은 무엇입니까?-HTML 튜토리얼-php.cn

HTML 코드에서 텍스트와 이미지를 중앙에 배치하는 방법은 무엇입니까?

黄舟

풀어 주다： 2017-05-26 15:40:11

원래의

11746명이 탐색했습니다.

HTML 코드, 텍스트/이미지를 중앙에 배치하는 방법은 무엇입니까? 이것은 W3Cschool의 프로그래밍 Q&A에서 프론트엔드 Leier가 제기한 질문입니다. 네티즌 기부자 통시푸(Tong Xifu)가 자세한 답변을 전했다.

HTML 텍스트 센터링 및 html 그림 센터링 방법 코드는 html에서 텍스트 센터링과 그림 센터링을 구현하는 방법으로, html에서 텍스트 및 그림 내용 센터링을 구현하는 방법에는 세 가지가 있으며 그 중 두 가지는 CSS 스타일을 사용하여 구현됩니다. 이를 달성하려면 html 태그에 "align="center""(가운데)를 추가하세요.

1. 본문에 CSS 센터링 스타일 추가

CSS 스타일을 본문에 직접 설정합니다: text-align:center

1. HTML 예제 코드 완성:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta charset="gb2312" /> 
    <title>W3Cschool居中实例</title> 
    <style> 
      body{text-align:center} 
    </style> 
  </head> 
  <body> 
    W3Cschool会被居中 
  </body>
</html>

로그인 후 복사

2. 가운데 정렬된 인스턴스 스크린샷

HTML 코드에서 텍스트와 이미지를 중앙에 배치하는 방법은 무엇입니까?

텍스트 또는 그림 스크린샷을 가운데로 설정하세요

2. 텍스트 외부 개체에 CSS 센터링 스타일 추가

먼저 CSS 선택기 이름을 ".w3cschool"로 지정하고 선택기에 센터링 스타일을 추가합니다. 우리의 예에서는 텍스트용과 그림용으로 각각 하나씩 두 개의 DIV 개체를 보여줍니다.

1. 해당 CSS 코드는 다음과 같습니다.

.w3cschool{text-align:center}

로그인 후 복사

2. 전체 HTML+DIV+CSS 코드는 다음과 같습니다.

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta charset="gb2312" /> 
    <title>W3Cschool居中实例</title> 
    <style> 
      .w3cschool{text-align:center} 
    </style> 
  </head> 
  <body> 
    <div class="w3cschool">W3Cschool会被居中</div> 
    <div class="w3cschool">
      ![](http://upload-images.jianshu.io/upload_images/2642238-eba477a8a75edf90.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)    </div> 
  </body>
</html>

로그인 후 복사

3. 개체 내 이미지 및 텍스트 중앙 정렬 효과

HTML 코드에서 텍스트와 이미지를 중앙에 배치하는 방법은 무엇입니까?

html 텍스트 센터링 달성 - html 그림 센터링 예제

html 텍스트 센터링 실현 - html 그림 센터링 예제 스크린샷

3. 텍스트 외부 개체에 align="center"

를 추가하는 방법은 이전에는 html 태그에서 직접 align="center"를 사용하여 이미지를 중앙에 배치하는 방법이었습니다. 또는 개체의 텍스트 콘텐츠입니다. 우리의 예는 HTML 테이블의 중앙 정렬과 일반 HTML 태그의 콘텐츠 중앙 정렬을 보여줍니다.

1. 전체 HTML 소스 코드:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta charset="gb2312" /> 
    <title>html align居中-W3Cschool</title> 
  </head> 
  <body> 
    <div align="center">W3Cschool会居中的</div> 
    <table width="100%"> 
      <tr> 
        <td align="center">表格中居中</td> 
      </tr> 
    </table> 
  </body>
</html>

로그인 후 복사

2. 예제 효과 스크린샷

HTML 코드에서 텍스트와 이미지를 중앙에 배치하는 방법은 무엇입니까?