特殊标签img

作者: jia林 | 来源:发表于2017-09-15 23:27 被阅读0次

自打从事前端,脑子里就有个印象,img属于行内替换元素,就是既具有内联元素的特性:能在一行显示,又有块标签属性:支持宽高,因为一直引用reset重置样式(里面已经把img{display:block}),就没怎么注意这个概念,直到最近接受一个项目才意识到这个问题:
让img居中注意一下几点:
1、在样式没有重置之前,text-align:center可是图片居中

//css
div{
width:200px;
text-align:center;   //可使图片居中
}
img{
width:100px;
}
//html
<div>
    ![](../image/1.png)
</div>

2、将img转换为块级

//css
div{
width:200px;
}
img{
display:bloack;
width:100px;
margin:0 auto;  // //可使图片居中
}
//html
<div>
    ![](../image/1.png)
</div>
  • 注意不管使用什么方法,安全起见,img自身和他的父级都设置上宽度

相关文章

  • 特殊标签img

    自打从事前端,脑子里就有个印象,img属于行内替换元素,就是既具有内联元素的特性:能在一行显示,又有块标签属性:支...

  • day02

    今天学到了什么 1.HTML常用的标签 ① p--段落标签 ②img 图片标签特殊:单标签src--标签的属性功...

  • img,picture,video,audio,script标签

    img 毫无疑问我们最熟悉的替换型标签就是 img 标签了,几乎每个前端都会日常使用 img 标签。 img 标签...

  • css3~图片垂直居中

    2017.03.07 img外部div标签: img标签: html代码:

  • day02

    今天学到了什么? 1.1### img 图片标签特殊:单标签src--标签的属性alt--当图片加载不出来,用来描...

  • 基础标签简介(img/br/a/base/列表/表格/表单/vi

    img标签: img标签中的img其实是英文image的缩写,所以img标签的作用, 就是告诉浏览器我们需要显示一...

  • HTML图像

    HTML图像-图像标签和源属性(Src) 在HTML中,图像由标签定义。是空标签,意...

  • JSX

    JSX中的特殊属性写法 className htmlFor input/img单标签必须有闭合斜杠 style属性...

  • 二,常见HTML标签

    一,img标签 1,什么是img标签? img其实就是image的缩写,所以这个标签的作用是,告诉浏览器要显示...

  • img标签

    格式: src 是 source 的缩写。""内填写图片的路径,分为绝对和相对,相对路径即网页的.html文件所在...

网友评论

    本文标题:特殊标签img

    本文链接:https://www.haomeiwen.com/subject/snnesxtx.html