html图片置顶和局中

html-css042

html图片置顶和局中,第1张

html图片置顶和居中需要设置margin和text-align属性即可，接下来新建一个html文件具体的演示一下：

1、准备html文件和图片，如下图所示

2、在html文件的body标签内加属性margin和text-align，如下图所示

3、右键单击html文件选择浏览器运行，如下图所示

4、接下来就看到图片置顶居中了，如下图所示

在html中插入图片使用img标签，它有src属性用于填写该图片的路径，alt属性作用是当图片显示失败时就显示alt中的文字。

设置图片的宽用width，高用height，上下左右的位置分别用margin-top，margin-bottom，margin-left，margin-right，代码如下：

<!DOCTYPE html>

<html>

<head>

<title>image</title>

<meta charset="utf-8">

<style type="text/css">

.myImage{

width: 400px

height: 300px

margin-top: 100px

margin-left: 100px

}

</style>

</head>

<body>

<img src="images/cat.jpg" class="myImage" alt="小猫">

</body>

</html>

扩展资料：

img标签的其它常用属性：align属性应用于图像和周围文本的对齐方式，border属性应用于图像边框值。

img 标签向网页中嵌入一幅图像,从技术上讲，<img>标签并不会在网页中插入图像，而是从网页上链接图像，<img>标签创建的是被引用图像的占位空间。

参考资料：

百度百科-image标签

html网页图片的路径，可以鼠标右键点击图片，然后点击"检查"或者"审查元素"，在控制台找到，下面详细介绍操作方法

1、以这个页面为例百度图片，对一个图片右键，然后检查元素

2、找到定位的元素，点击"检查"后图片的元素会变蓝

3、双击图片的地址选中并按ctrl+c复制

例如这个图片

<img class="main_img img-hover" data-imgurl="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3588772980,2454248748&ampfm=27&ampgp=0.jpg" src="data:image/jpegbase64,/9j/4AAQSkZJRgABAQAAAQABAA" style="background-color: rgb(195, 177, 157)width: 375pxheight: 211px">

加黑的部分就是地址。地址的后缀一般是.jpg或.png或.gif等。大部分地址都是这个src属性，但个别图片的src属性以data:image开头的话，它就不是一个地址了。

4、我们在浏览器地址栏输入图片的地址，可以看到图片加载出来了