App下載
話題 首頁(yè) > HTML 教程 > HTML 教程話題列表 > 詳情

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

精華
前端?蕾兒 2016-11-29 10:57:51 瀏覽(59697) 回復(fù)(9) 贊(2)
html 代碼 ,怎么將文本/ 圖片居中?
html

回答(9)

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

html文字居中和html圖片居中方法代碼,通過(guò)在html中實(shí)現(xiàn)文字居中圖片居中篇在html中實(shí)現(xiàn)文字圖片內(nèi)容居中有三種方法,其中兩種使用CSS樣式實(shí)現(xiàn),一直使用原始的html標(biāo)簽內(nèi)加入“align="center"”(居中)實(shí)現(xiàn)。

一、對(duì)body加CSS居中樣式


我們直接對(duì)body 設(shè)置CSS樣式:text-align:center1、完整HTML實(shí)例代碼:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="gb2312" /> 
<title>W3Cschool居中實(shí)例</title> 
<style> 
body{text-align:center} 
</style> 
</head> 
<body> 
W3Cschool會(huì)被居中 
</body> 
</html>

2、居中實(shí)例截圖

對(duì)body設(shè)置居中實(shí)現(xiàn)文字或圖片居中

對(duì)body設(shè)置居中實(shí)現(xiàn)文字或圖片居中截圖

二、對(duì)文字外層對(duì)象加css居中樣式


首先我們CSS命名選擇器 為“.w3cschool”,對(duì)此選擇器內(nèi)加居中樣式。我們實(shí)例演示2個(gè)DIV對(duì)象,一個(gè)放文字一個(gè)放圖片。1、對(duì)應(yīng)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居中實(shí)例</title> 
<style> 
.w3cschool{text-align:center} 
</style> 
</head> 
<body> 
<div class="w3cschool">W3Cschool會(huì)被居中</div> 
<div class="w3cschool"><img src="http://statics.w3cschool.cn/images/w3c/logo.png" /></div> 
</body> 
</html>

3、CSS實(shí)現(xiàn)對(duì)象內(nèi)圖片和文字居中效果截圖

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

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

三、之間對(duì)文字外層對(duì)象加align="center"


此方法是以前較為常見的方法,直接在html標(biāo)簽內(nèi)使用align="center"即可實(shí)現(xiàn)對(duì)象內(nèi)圖片或文字內(nèi)容實(shí)現(xiàn)居中。我們實(shí)例演示HTML表格里居中與一般HTML標(biāo)簽內(nèi)內(nèi)容居中。

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會(huì)居中的</div> 
<table width="100%"> 
<tr> 
<td align="center">表格中居中</td> 
</tr> 
</table> 
</body> 
</html>

2、實(shí)例效果截圖

html文字居中實(shí)現(xiàn)截圖

html文字居中,html table 表格內(nèi)文字居中實(shí)現(xiàn)截圖

直接在標(biāo)簽內(nèi)使用align屬性,方便實(shí)踐普通html標(biāo)簽html表格標(biāo)簽 內(nèi)使用“align="center"”居中代碼實(shí)現(xiàn)對(duì)象內(nèi)內(nèi)容居中。

桂子旭 2017-03-07

父級(jí)元素width:100%,子集元素margin:0 auto;

Silence廣 2018-02-11

父級(jí)元素width:100%,子集元素margin:0 auto;

或者“align="center"屬性

一筆荒蕪 2018-05-31

留名留名!!!,同樣的問(wèn)題,看看咋結(jié)局!!!

1144100656 2018-05-31

有同樣等問(wèn)題咋解決,只能慢慢等大神啦.留名留名。。

1152696398 2018-05-31

這個(gè)領(lǐng)域不太懂!! 還是坐等大佬吧...

一樂(lè)拉面 2018-06-28

最后三條評(píng)論一看就是刷的

海海520 2018-07-03

父級(jí)元素width:100%,子集元素margin:0 auto;或者“align="center"屬性

要回復(fù),請(qǐng)先登錄 或者注冊(cè)