图片居中怎么设置 css

图片居中怎么设置 css,第1张

写个简单的例子给你吧

htlm如下:

<h4>图片水平居中</h4>

<div class="demo1">

<岩慧img src="你的图片" alt="">

</div>

<h4>图片垂直居中</h4>

<div class="demo2">

<div class="imgbox">

<img src="你的图片" alt="">

</div>

<悄枣搭/div>

<启拿h4>图片水平垂直居中</h4>

<div class="demo3">

<div class="imgbox">

<img src="你的图片" alt="">

</div>

</div>

css如下:

<style type="text/css">

.demo1{width: 200pxheight: 200pxborder: 1px solid #cccdisplay: inline-blocktext-align: center}

.demo1 img{width: 100pxheight: auto}

.demo2{width: 200pxheight: 200pxborder: 1px solid #cccdisplay: table}

.demo2 .imgbox{display: table-cellvertical-align: middle}

.demo2 .imgbox img{width: 100pxheight: auto}

.demo3{width: 200pxheight: 200pxborder: 1px solid #cccdisplay: table}

.demo3 .imgbox{display: table-cellvertical-align: middletext-align: center}

.demo3 .imgbox img{width: 100pxheight: auto}

</style>

在网页中插入CSS样式表教程:

第一种:行内式样式插入CSS样式

在html文件中输入如上图所示的内容。

这时候在使裤并用浏览器打开,就实现插入CSS样式。如上图所示。

第二种:嵌入式样式插入CSS样式

在html文件中输入如上图所示的内容。

这时候在使用浏览器打开,就实现插入CSS样式。如上图所示。

第三种:外部样式表插入CSS样式

在html文件中输入如上图所示的内容。

这时候在使用浏览器打开,就实现插入CSS样式。如上图所示。

扩展资料

在style参铅纯明数后面的引号里的内容相当于在样式表大括号里的内容槐告。

style参数可以应用于任意BODY内的元素(包括BODY本身),除了BASEFONT、PARAM和SCRIPT。

1.

第一种方法是行内样式,就是直接把CSS代码添加到html的标签前纯中,作为标签的一种属性存在。

2.

第二种方式是内嵌样式,就是将CSS代码添加到<head></head>之间,并用<style></sty...

3.

第三种方法是链接样好悔碰式,就是友谈将“页面内容”和“样式代码”分类成两个文件或多个文件,实现html代码和css代码的完全分离。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11984372.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存