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
- MySQL数据库(十):用户授权与撤销授权
- Oracle 12c系列(二)|PDB的创建
- Spring Security 入门(四):自定义-Filter
- Go语言中Select语句用法实例
- 从Mysql备份中恢复单个表
- spark编译:构建基于hadoop的spark安装包及遇到问题总结
- Mysql忘记root密码的恢复方法
- 深入剖析Go语言编程中switch语句的使用
- MySQL中DDL、DML、DCL的那些语句
- 如何查看spark与hadoop、kafka、Scala、flume、hive等兼容版本【适用于任何版本】
- golang实现简单的udp协议服务端与客户端示例
- Oracle 12c系列(三)|存储资源隔离 Flex Diskgroup
- Scala的map实现key和value排序及各种排序比较等知识讨论
- crontab执行后发送邮件到指定邮箱
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例