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

    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

原文地址:https://www.cnblogs.com/ellisonzhang/p/10516108.html

时间: 2024-10-11 10:57:41

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

HTML5图片预览

作者:Snandy 两种方式实现 URL FileReader 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <!DOCTYPE HTML> <html>     <head>     <meta charset="utf

bootstrap轮播组件,大屏幕图片居中效果

在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中效果不同,大屏效果非常糟糕.比如 这样一张图片, 为了图片自适应设置width=100%,在宽1920px下显示效果是这样的 显然,因为图片设置了100%的宽度,其大部分内容被截去,显示非常糟糕. 后来想了想.有没有办法可以让图片真正的自适应呢并且居中呢,于是想到了css3背景图片属性backgro

css图片居中(水平居中和垂直居中)

http://www.51xuediannao.com/html+css/htmlcssjq/css_img_center.html css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍 css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 auto实现图片水平居中 利用margin: 0 auto实现图片居中就是在图片上加上c

关于大图片居中显示~适应移动端

今天修改项目的时候碰到一个问题,移动端点击小图片后,打开一个大图片显示:由于这个大图片的比例是不确定的,所以如何显示就成了一个问题. 最初的这个功能是设置了一个css3的属性,然后在Android手机上出了问题, -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; 然后我查了一下这个属性: 因为版本的原因,一些Android机没法使用这个属性. 我找了找居中显示的资料,看了看百度图片的图片显示方

diplay:table-cell和伪元素:after方法让图片居中

让图片居中和文字居中是不一样的,文字居中可以通过line-height等调整,让图片居中方法,参考各种资料博文和测试  目前接触两种方法 display:table-cell和伪元素:after方法 一,display:table-cell 这个属性是让元素以表格单元格的形式呈现类似table标签中的td,其他现代浏览器和ie8+都是支持的 ie6/7是不支持的(当然下面也有解决方法). 如果只看table元素 就两个特点: 1,同行等高 2,宽度自动调整 那么table-cell是不是也具有这

html基础 img标记 设置图片的宽度和边框 利用div使图片居中显示

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯

用CSS让网页背景图片居中的方法

网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width:800px;height:600px;background:url(../images/logo.jpg) no-repeat 250px 270px;border:1px solid #cccccc;"></div> 第二种居中方法:用50%设定,很方便: <div sty

设置图片居中的方法

1.设置图片居中(一图居中) HTML代码 <div class="box"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> </div> CSS代码 .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*