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

精華

前端?蕾兒 2016-11-29 10:57:51 瀏覽(60848) 回復(9) 贊(2)

html 代碼 ,怎么將文本/ 圖片居中？

標簽： html

回答(9)

施主同西否精華 2016-11-29

html文字居中和html圖片居中方法代碼，通過在html中實現(xiàn)文字居中圖片居中篇在html中實現(xiàn)文字圖片內容居中有三種方法，其中兩種使用CSS樣式實現(xiàn)，一直使用原始的html標簽內加入“align="center"”（居中）實現(xiàn)。

一、對body加CSS居中樣式

我們直接對body 設置CSS樣式：text-align:center1、完整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、居中實例截圖

對body設置居中實現(xiàn)文字或圖片居中

對body設置居中實現(xiàn)文字或圖片居中截圖

二、對文字外層對象加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"><img src="http://statics.w3cschool.cn/images/w3c/logo.png" /></div> 
</body> 
</html>

3、CSS實現(xiàn)對象內圖片和文字居中效果截圖

實現(xiàn)html文字居中-html圖片居中實例

實現(xiàn)html文字居中-html圖片居中實例截圖

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

此方法是以前較為常見的方法，直接在html標簽內使用align="center"即可實現(xiàn)對象內圖片或文字內容實現(xiàn)居中。我們實例演示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文字居中實現(xiàn)截圖