HTML5圖片居中的問題

時間 2019-11-18

標籤 html5 html 圖片居中問題欄目 HTML5 简体版

原文原文鏈接

剛開始接觸html5，準備寫一些網頁，可是學習的過程當中遇到了圖片不能居中的問題，首先來看看，代碼和執行效果：css

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <!-- 下面這行代碼標定了編碼方式，爲了防止在某些瀏覽器中中文亂碼的問題-->
 6     <meta charset="utf-8">
 7     <title>圖片居中問題</title>
 8 
 9 </head>
10 
11 <body>
12 
13     <img id="myImage1" align="center" onclick="changeImage()" src="book.jpg"/>
14     <br />
15     <br />
16     <button type="buttonImage" align="center" onclick="changeP()"> 點擊進入 </button>
17     
18 </body>
19 </html>

上面的代碼結構應該很簡單了吧，就是一個圖片，一個按鈕，中間插了兩個空行！html

本來疑問在標籤中插入align="center"就萬事大吉了，可是執行的結果卻不盡人意。html5

那麼，確定要百度怎麼實現圖片居中的問題了，我搜索的問題是「HTML5圖片居中」，而後出來不少個帖子，垃圾的我就不說了，http://www.divcss5.com/html/h603.shtml，這個帖子算是衆多垃圾貼中不那麼垃圾的，裏面講了三種方式：瀏覽器

對body加CSS居中樣式：這種方法親測有效，不過就是對於還沒來得及學css的夥伴就比較煩了。
- 但其實就是在head裏面加了下面三句話，可是比較煩的是，加了這三句話以後，body裏的全部內容都居中了，這顯然不是咱們想要的。
1. <style>
2. body{text-align:center}
3. </style>
對文字外層對象加css居中樣式：這個通過測試也是有效的，但它仍是css的內容，而且用了div+css。
- 其實就是在head里加了下面的語句，這個和上面不一樣的是，能夠經過class屬性來靈活的控制讓誰居中，但涉及到css，因此不喜歡，不高興，難道就沒有純種的html5嗎？

<style>
.divcss5{text-align:center}
</style>

- 注意，這個比第一個稍微複雜些，使用時要定義class屬性，詳情請點擊上面的連接！
直接對文字外層對象加align="center"：按個人理解，這種方法就是我上面測試過的，失敗了的方法，哼，給差評！

在html5中搜索了半天，也沒有找到行之有效的解決辦法。忽然想在html中搜索一下試試，結果大跌眼鏡。學習

沒想到「百度經驗」中已經把這個問題描述的很清楚了，你們看了這個就恍然大悟了：http://jingyan.baidu.com/article/9faa7231b22db6473c28cbd0.html測試

原來，要想實現圖片居中就必須把圖片包裹在一個「塊」中，真是無語，下面是測試代碼和效果，你們看看吧！編碼

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <!-- 下面這行代碼標定了編碼方式，爲了防止在某些瀏覽器中中文亂碼的問題-->
 6     <meta charset="utf-8">
 7     <title>圖片居中問題</title>
 8 
 9 </head>
10 
11 <body>
12 
13     <div align="center">
14     <img id="myImage1" src="book.jpg"/>
15     <br />
16     <br />
17     <button type="buttonImage"> 點擊進入 </button>
18     </div>
19     
20     <p align="center"><img src="book.jpg"/></p>
21     
22 </body>
23 </html>