html文字居中 html圖片居中代碼

2020-03-24 17:44:26

字體：大中小

來源：轉載

供稿：網友

html文字居中和html圖片居中方法代碼，通過在html中實現文字居中圖片居中篇

在html中實現文字圖片內容居中有三種方法，其中兩種使用CSSyangshi_10628_1.html' target='_blank'>CSS樣式實現，一直使用原始的html標簽內加入“align="center"”（居中）實現。

一、對body加CSS居中樣式 - TOP

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

1、完整HTML實例代碼：

<!DOCTYPEhtml
<htmlxmlns="http://www.w3.org/1999/xhtml"
<head
<metacharset="gb2312"/
<titledivcss5之居中實例</title
<style
body{text-align:center}
</style
</head
<body
我會被居中
</body
</html

2、居中實例截圖

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

二、對文字外層對象加css居中樣式 - TOP

首先我們CSS命名選擇器為“.divcss5”,對此選擇器內加居中樣式。我們實例演示2個DIV對象，一個放文字一個放圖片。

1、對應CSS代碼如下：

.divcss5{text-align:center}

2、完整HTML+DIV+CSS代碼如下：

<!DOCTYPEhtml
<htmlxmlns="http://www.w3.org/1999/xhtml"
<head
<metacharset="gb2312"/
<titledivcss5之居中實例</title
<style
.divcss5{text-align:center}
</style
</head
<body
<divclass="divcss5"我會被居中</div
<divclass="divcss5"<imgsrc="divcss5-logo-201305.gif"/</div
</body
</html

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

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

這里說明，圖片“divcss5-logo-201305.gif”文件是與html放一起，使用html img標簽實現圖片引入html。

4、本居中實例在線演示：查看案例

5、本居中實例打包下載：

立即下載（3.156KB）

三、之間對文字外層對象加align="center" - TOP

此方法是以前較為常見的方法，直接在html標簽內使用align="center"即可實現對象內圖片或文字內容實現居中。

我們實例演示HTML表格里居中與一般HTML標簽內內容居中。

1、完整HTML源代碼：

<!DOCTYPEhtml
<htmlxmlns="http://www.w3.org/1999/xhtml"
<head
<metacharset="gb2312"/
<titlehtmlalign居中</title
</head
<body
<divalign="center"我會居中的</div
<tablewidth="100%"
<tr
<tdalign="center"表格中居中</td
</tr
</table
</body
</html

2、實例效果截圖

html文字居中實現截圖
html文字居中，html table表格內文字居中實現截圖