HTML5图片居中的问题
刚开始接触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里的所有内容都居中了，这显然不是我们想要的。
- <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
原来，要想实现图片居中就必须把图片包裹在一个“块”中，真是无语，下面是测试代码和效果，大家看看吧！
<!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图片居中的问题的更多相关文章
- HTML5 图片宽高自适应，居中裁剪不失真
一,使用 JS,先上效果图,右图为定死宽高的效果,左图为处理之后的 1, 主要思路是,在图片 onload 后,将图片的宽高比和 div 容器的宽高比进行比较, 2, 从而确定拉伸或者压缩之后是宽还是 ...
- line-height，vertical-align及图片居中对齐问题根源解析
关于图片居中对齐的问题,进入前端行业虽然有一段时间了,以为自己懂了,可是实际上还是一知半解,找了一些博客来看了一下,但是感觉讲的有点碎,看完还是一知半解. 查阅了一下<css权威指南>,结 ...
- HTML5图片旋转
HTML5图片旋转 首先我们使用Cococs2dx-Js-Lite版,来创建一个工程,我们所需要的开发环境如下: 1,webstrom 2,google chrome浏览器 3,cocos2dx-Js ...
- 基于CSS3和HTML5图片加工前后对比代码
分享一款CSS3和HTML5图片加工前后对比代码.这是一款通过CSS3和HTML5将图像转换为自动响应的元素:图像缩放和裁剪以适应容器.效果图如下: 在线预览 源码下载 实现的代码. html代码 ...
- Html、Css-----当有文字和图片的时候，需要文字和图片居中，怎么实现？不想文字换行怎么设置
1 当有文字和图片的时候,需要文字和图片居中,怎么实现? <a href=#" target="aa" style="white-space:nowrap ...
- html5 图片转base64预览显示
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5图片拖拽预览原理及实现
一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...
- [转]div 让文字或图片居中
本文转自:http://qsfwy.iteye.com/blog/250206 在div 中让 文字或图片居中,请参考以下代码1: - - - - - - - - - - - - - - - - - ...
- HTML5 图片上传预览
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
随机推荐
- Spring源码情操陶冶-ComponentScanBeanDefinitionParser文件扫描解析器
承接前文Spring源码情操陶冶-自定义节点的解析,本文讲述spring通过context:component-scan节点干了什么事 ComponentScanBeanDefinitionParse ...
- 二、urllib进阶
Handler处理器 和 自定义Opener opener是 urllib.request.OpenerDirector 的实例,我们之前一直都在使用的urlopen,它是一个特殊的opener(也就 ...
- Windows下Nginx的配置及配置文件部分介绍
一.在官网下载 nginx的Windows版本,官网下载:http://nginx.org/download/ 选择你自己想要的版本下载,解压 nginx(例如nginx-1.6.3) 包到你的win ...
- mac 查看某个文件夹下所有隐藏文件(夹)的大小
du -d 1 -h 对应Linux的命令是: du -ah --max-depth=1
- neo-thinsdk-cs 之 thinWallet 接入私链
neo-thinsdk-cs 之 thinWallet 接入私链 2017年底刚开始接触区块链,目前在被 NEO 折磨. 一开始被官方文档和 NEO-GUI 搞得体无完肤(尤其是传说中的 F12),也 ...
- 中小研发团队架构实践之应用监控Metrics
一.Metrics简介 应用监控系统Metrics由Metrics.NET+InfluxDB+Grafana组合而成,通过客户端Metrics.NET在业务代码中埋点,Metrics.N ...
- Java基础(含思维导图)
很早之前整理的Java基础的一些知识点,思维导图: 1.'别名现象' 对一个对象赋值另一个对象,会指向新的对象引用,赋值前的对象引用会由于不再被引用而被gc回收: 而基本类型则不同.基本类型存储了实际 ...
- .NET常用第三方库（包）总结
文章会不定期更新,以下内容均为个人总结,欢迎各位拍砖指正 序列化与反序列化 JSON.NET应该是.NET平台上使用最为广泛的序列化/反序列化包了,ASP.NET和ASP.NET Core中默认序列化 ...
- hexo博客简易搭建教程
什么是Hexo Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页.官网 Hexo安装 安装 在安装Hex ...
- 高可用之KeepAlived(一)：基本概念和配置文件分析
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...