HTML5图片居中的问题

刚开始接触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里的所有内容都居中了，这显然不是我们想要的。

    1. <style> 
    2. body{text-align:center} 
    3. </style> 

  • 对文字外层对象加css居中样式：这个经过测试也是有效的，但它还是css的内容，并且用了div+css。

    • 其实就是在head里加了下面的语句，这个和上面不同的是，可以通过class属性来灵活的控制让谁居中，但涉及到css，所以不喜欢，不高兴，难道就没有纯种的html5吗？
    1. <style> 
    2. .divcss5{text-align:center} 
    3. </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

posted @ 2017-10-02 11:54  景寓6号  阅读(23951)  评论(3)  编辑  收藏  举报