HTML程式碼怎麼實作文字和圖片居中？-html教學-PHP中文網

HTML程式碼怎麼實作文字和圖片居中？

黄舟

發布： 2017-05-26 15:40:11

原創

11765 人瀏覽過

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

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

一、對body加上CSS居中樣式

我們直接對body 設定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程式碼怎麼實作文字和圖片居中？

#對body設定居中實作文字或圖片居中截圖

二、將文字外層物件加css居中樣式

首先我們CSS命名選擇器為「.w3cschool」,對此選擇器內加居中樣式。我們實例示範2個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、CSS實作物件內圖片與文字居中效果截圖

HTML程式碼怎麼實作文字和圖片居中？

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

#實作html文字居中-html圖片居中實例截圖

三、之間對文字外層物件加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程式碼怎麼實作文字和圖片居中？