<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="img/mynote.ico"/>
<title>img图片</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid black;
text-align: center;
line-height: 300px;
}
#img1 {
width: 200px;
/*父级添加属性:text-align: center;
line-height: 与宽度相等;
自身在添加属性:vertical-align: middle
即可实现盒子内元素水平垂直居中*/
vertical-align: middle;
}
#img2 {
width: 200px;
}
</style>
</head>
<body>
<div><img id="img1" name="img1" src="img/少女.png" alt="少女" title="少女" /></div>
<!--alt:图片加载失败显示标题-->
<!--title:鼠标移动到图片上显示标题-->
<img id="img2" name="img2" src="img/樱落蝶祈.png" />
</body>
</html>