文字和圖片居中的HTML代碼怎麼寫？

時間 2020-07-26

標籤文字圖片居中 html 代碼怎麼欄目 HTML 简体版

原文原文鏈接

HTML 代碼 ,怎麼將文本/ 圖片居中？這是在W3Cschool的編程問答中前端♌蕾兒提出的問題。網友施主同西否給出了詳細的解答。css

html文字居中和html圖片居中方法代碼，經過在html中實現文字居中圖片居中篇在html中實現文字圖片內容居中有三種方法，其中兩種使用CSS樣式實現，一直使用原始的html標籤內加入「align="center"」（居中）實現。html

1、對body加CSS居中樣式

咱們直接對body 設置CSS樣式：text-align:center 前端

一、完整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>

二、居中實例截圖

對body設置居中實現文字或圖片居中

對body設置居中實現文字或圖片居中截圖編程

2、對文字外層對象加css居中樣式

首先咱們CSS命名選擇器爲「.w3cschool」,對此選擇器內加居中樣式。咱們實例演示2個DIV對象，一個放文字一個放圖片。spa

一、對應CSS代碼以下：

.w3cschool{text-align:center}

二、完整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">
      ![](//upload-images.jianshu.io/upload_images/2642238-eba477a8a75edf90.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    </div> 
  </body> 
</html>

三、CSS實現對象內圖片和文字居中效果截圖

實現html文字居中-html圖片居中實例

實現html文字居中-html圖片居中實例截圖ssr

3、之間對文字外層對象加`align="center"`

此方法是之前較爲常見的方法，直接在html標籤內使用align="center"便可實現對象內圖片或文字內容實現居中。咱們實例演示HTML表格里居中與通常HTML標籤內內容居中。code

一、完整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>