怎样让html中的img标签居中显示

html-css011

怎样让html中的img标签居中显示,第1张

01

先看下我们的html代码,在一个div里放入一个img图片标签。

02

再看下我们div的样式,主要地方是我们设置了div的宽度,为400px,如图所示的代码。

03

现在看下页面,可以看到,现在的图片是靠左显示的,并没居中。

04

要让img标签的图片居中,我们可以加上一行样式代码:text-align: center就行了。

05

再次看下页面,可以看到现在的图片已经是居中显示的了。

l让文字居中的方法:1、给文本所在标签加CSS属性值“text-align:center”;2、在行内标签或行内块级标签中加CSS属性值“text-align:left”。

前端(vue)入门到精通课程:进入学习

API 文档、设计、调试、自动化测试一体化协作工具:点击使用

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

两种情况:1、文本格式居中;2、文本所在标签居中显示在窗口中。

1、给文本所在标签加CSS属性值"text-align:center"即可。例如:

2、有很多种方法,这里介绍两种,例如:

1)(建议)文本应该被 行内标签或行内块级标签 包裹,行内标签或行内块级标签又被 块级标签包裹。此种方式 文本格式 会居中。若想 文本格式 不居中,可在行内标签或行内块级标签中加CSS属性值"text-align:left"或其他。

2)文本被块级标签包裹。为块级标签设置宽度,并加上CSS属性值" margin:0 auto"。此种方式 文本格式 不会居中。若想 文本格式 也居中,可在块级标签加CSS属性值"text-align:center"。

IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。

解决这个问题比较好的方式,就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:Automargin-right:Auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持,所以还要设置父容器的 "text-align:center"。

若居中对齐的子元素内的行内内容不需要居中对齐,则还需要为其设置“text-align:left”:

* { font-family:Consolas,Verdana,Arialfont-size:12px}