How to center text and images in HTML code?-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to center text and images in HTML code?

黄舟

May 26, 2017 pm 03:40 PM

HTML code, how to center text/image? This is a question raised by front-end Leier in W3Cschool’s programming Q&A. Netizen donor Tong Xifu gave a detailed answer.

html text centering and html picture centering method code, by realizing text centering and picture centering in html, there are three methods to realize text and picture content centering in html, two of which are implemented using CSS styles, and the original one is always used. Add "align="center"" (center) to the html tag to achieve this.

1. Add CSS centering style to the body

We directly set the CSS style for the body: text-align:center

1. Complete HTML example code:

<!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>

Copy after login

2. Screenshot of centered example

How to center text and images in HTML code?

Set the body to center to achieve centered text or picture screenshots

2. Add a css centering style to the text outer object

First of all, we name the CSS selector ".w3cschool", and add a centering style to the selector. Our example demonstrates two DIV objects, one for text and one for pictures.

1. The corresponding CSS code is as follows:

.w3cschool{text-align:center}

Copy after login

2. The complete HTML+DIV+CSS code is as follows:

<!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>

Copy after login

3. Screenshot of the CSS effect of centering images and text within objects

How to center text and images in HTML code?

Achieve html text centering-html picture centering example

Achieve html text centering-html picture centering example screenshot

Three, between Add align="center"

to the text outer object. This method was a common method in the past. Use align="center" directly in the html tag to center the image or text content in the object. Our example demonstrates centering in HTML tables and centering content in general HTML tags.

1. Complete HTML source code:

<!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>

Copy after login

2. Screenshot of the example effect

How to center text and images in HTML code?

HTML text centered screenshot

html text is centered, html table text is centered in the table to achieve screenshot
Use the align attribute directly in the tag to facilitate the practice of using the "align="center"" centering code in ordinary html tags and html table tags to center the content in the object.

The above is the detailed content of How to center text and images in HTML code?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn