刚开始接触html5，准备写一些网页，但是学习的过程中遇到了图片不能居中的问题，首先来看看，代码和执行效果：

 <!DOCTYPE html>

 <html>

 <head>

     <!-- 下面这行代码标定了编码方式，为了防止在某些浏览器中中文乱码的问题-->

     <meta charset="utf-8">

     <title>图片居中问题</title>

 </head>

 <body>

     <img id="myImage1" align="center" onclick="changeImage()" src="book.jpg"/>

     <br />

     <br />

     <button type="buttonImage" align="center" onclick="changeP()"> 点击进入 </button>

 </body>

 </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

原来，要想实现图片居中就必须把图片包裹在一个“块”中，真是无语，下面是测试代码和效果，大家看看吧！

 <!DOCTYPE html>

 <html>

 <head>

     <!-- 下面这行代码标定了编码方式，为了防止在某些浏览器中中文乱码的问题-->

     <meta charset="utf-8">

     <title>图片居中问题</title>

 </head>

 <body>

     <div align="center">

     <img id="myImage1" src="book.jpg"/>

     <br />

     <br />

     <button type="buttonImage"> 点击进入 </button>

     </div>

     <p align="center"><img src="book.jpg"/></p>

 </body>

 </html>

虽然问题解决了，但是经过这个小小的风波，我们必须明白一个道理，那就是现在html/html5单枪匹马已经玩不转了，最好抓紧学习HTML+CSS+JavaScript，他们之间的关系请点击：http://www.cnblogs.com/wsg25/p/7609187.html

HTML5图片居中的问题的更多相关文章

  1. HTML5 图片宽高自适应，居中裁剪不失真

    一,使用 JS,先上效果图,右图为定死宽高的效果,左图为处理之后的 1, 主要思路是,在图片 onload 后,将图片的宽高比和 div 容器的宽高比进行比较, 2, 从而确定拉伸或者压缩之后是宽还是 ...

  2. line-height，vertical-align及图片居中对齐问题根源解析

    关于图片居中对齐的问题,进入前端行业虽然有一段时间了,以为自己懂了,可是实际上还是一知半解,找了一些博客来看了一下,但是感觉讲的有点碎,看完还是一知半解. 查阅了一下<css权威指南>,结 ...

  3. HTML5图片旋转

    HTML5图片旋转 首先我们使用Cococs2dx-Js-Lite版,来创建一个工程,我们所需要的开发环境如下: 1,webstrom 2,google chrome浏览器 3,cocos2dx-Js ...

  4. 基于CSS3和HTML5图片加工前后对比代码

    分享一款CSS3和HTML5图片加工前后对比代码.这是一款通过CSS3和HTML5将图像转换为自动响应的元素:图像缩放和裁剪以适应容器.效果图如下: 在线预览   源码下载 实现的代码. html代码 ...

  5. Html、Css-----当有文字和图片的时候，需要文字和图片居中，怎么实现？不想文字换行怎么设置

    1 当有文字和图片的时候,需要文字和图片居中,怎么实现? <a href=#" target="aa" style="white-space:nowrap ...

  6. html5 图片转base64预览显示

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  7. HTML5图片拖拽预览原理及实现

    一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...

  8. [转]div 让文字或图片居中

    本文转自:http://qsfwy.iteye.com/blog/250206 在div 中让 文字或图片居中,请参考以下代码1: - - - - - - - - - - - - - - - - - ...

  9. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

随机推荐

  1. web项目，ftl文件中的路径引入问题

    路径问题的引入方式:绝对路径.相对路径 区别如图: =================================================

  2. 700名黑客无法攻破Trillium安全防护软件 欲以网络安全险获利

    盖世汽车讯 据外媒报道,在2017 DEF CON黑客大会上,黑客们受邀入侵Car Hacking Village会场内的各类自动驾驶车辆.物联网网络安全公司--Trillium Incorporat ...

  3. 济南清北学堂游记 Day 5.

    十一月的第一天.算下来在济南已经呆了接近一星期了...... 还剩九天...看着洛谷的倒计时心里直发慌. 也许我不该过多纠结于高级算法,基础也是很重要的. 今天晚上就自由的敲一些板子吧.最后的九天,让 ...

  4. SeleniumIDE_初识

    版权声明:本文为博主原创文章,转载请注明出处. 学习Selenium,除了自己手动编写脚本,还可以使用Selenium IDE进行脚本录制. 安装Selenium IDE Selenium IDE是F ...

  5. supervisor配置文件详解

    介绍 Supervisor是一个进程控制系统. 它是一个C/S系统(注意: 其提供WEB接口给用户查询和控制), 它允许用户去监控和控制在类UNIX系统的进程. 它的目标与launchd, daemo ...

  6. python学习:设计一个算法将缺失的数字找出来。

    算法题   已知整型数值 a[99], 包含的所有99个元素都是从1-100中随机取值,并且这99个数两两互不相等,也就是说从1到100这100个数字有99个在数值内,有一个缺失.请设计一个算法将缺失 ...

  7. angular ng build --prod 打包报错解决方案

    使用以下代码  就不报错了 ng build --prod --no-extract-license    打包命令 使用以下代码  就不报错了 ng build --prod --no-extrac ...

  8. java 流输出的一些问题

    一.java流的控制首先要先准备一个文件,例如:File f = new File(d:/lol.txt); 二.可以使用如下指令创建流,用于不同的用途 1.FileInputStream,FileO ...

  9. React设计思想

    熟悉一个新技术的关键是熟悉他的特色和理念 React框架本身和我们常用的JavaScript MVC框架,如:AngularJS,Backbone,Ember等,没有直接的可比性.在React的官方博 ...

  10. [翻译] 编写高性能 .NET 代码--第二章 GC -- 减少分配率, 最重要的规则,缩短对象的生命周期,减少对象层次的深度,减少对象之间的引用,避免钉住对象（Pinning）

    减少分配率 这个几乎不用解释,减少了内存的使用量,自然就减少GC回收时的压力,同时降低了内存碎片与CPU的使用量.你可以用一些方法来达到这一目的,但它可能会与其它设计相冲突. 你需要在设计对象时仔细检 ...