HTML5圖片居中的問題
阿新 • • 發佈：2017-10-02
png 文字 喜歡 java 編碼 clas -s code 多個
剛開始接觸html5，準備寫一些網頁，但是學習的過程中遇到了圖片不能居中的問題，首先來看看，代碼和執行效果：
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>
上面的代碼結構應該很簡單了吧，就是一個圖片，一個按鈕，中間插了兩個空行！
原本疑問在標簽中插入align="center"就萬事大吉了，但是執行的結果卻不盡人意。
那麽，肯定要百度怎麽實現圖片居中的問題了，我搜索的問題是“HTML5圖片居中”，然後出來很多個帖子，垃圾的我就不說了，http://www.divcss5.com/html/h603.shtml，這個帖子算是眾多垃圾貼中不那麽垃圾的，裏面講了三種方式：
-
對body加CSS居中樣式：這種方法親測有效，不過就是對於還沒來得及學css的夥伴就比較煩了。
-
但其實就是在head裏面加了下面三句話，但是比較煩的是，加了這三句話之後，body裏的所有內容都居中了，這顯然不是我們想要的。
- <style>
- body{text-align:center}
- </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>
雖然問題解決了，但是經過這個小小的風波，我們必須明白一個道理，那就是現在html/html5單槍匹馬已經玩不轉了，最好抓緊學習HTML+CSS+JavaScript，他們之間的關系請點擊：http://www.cnblogs.com/wsg25/p/7609187.html
HTML5圖片居中的問題