一.<img>的基本认识
二.替换元素
三.<img>对齐的常用方式
(1)使用text-align: center; 对齐
(2)使用margin: o auto;对齐
(3)其它
一.<img>的基本认识
在mdn中有这样的解释,<img>
是一个可替换元素。它的 属性的默认值是 inline
,但是它的默认分辨率(默认像素的大小)是由被嵌入的图片的原始宽高来确定的,使得它就像 inline-block
一样。
<img>元素默认值是 行内元素,行内元素设置宽高是不生效的,不过,因为<img>元素具有和inline-block(行内块)
一样的属性特点,所以<img>设置宽高是生效的。
二.替换元素
在css中,可以根据是否具有可替换内容,我们可以把元素分为替换元素和非替换元素。
替换元素:可以通过修改某个属性值呈现的内容就可以被替换的元素就称为"替换元素".例如,<img>,<video>,或者表单元素<textarea>和<input>等都是替换元素。
默认值为替换元素的,大多是行内元素,且都具有inline-block(行内块)的属性特点
。
三.<img>对齐的常用方式
(1)对于把<img>元素居中,我们可以使用 text-align: center; 属性
不过,关于使用text-align: center; 属性对齐是有方法的。
对于文本对齐,我们可以直接给元素加上text-align: center; 属性即可,不过对于<img>,要想使用text-align: center; 属性对齐,我们得给它加上一个 块级的父元素。
例如我们可以使用<div>当作父级,当然我们可以使用行内标签<span>当做父级,再使用 display:block; ,也可以实现图片居中
。
以下为方便观察效果,将盒子设置大一些,图片设置小一些,以及设置背景色.
使用<div>当做父级:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
.pic {
width: 200px;
height: 200px;
background-color: pink;
text-align: center;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="pic">
<img src="./images2/1.jpg" alt="">
</div>
</body>
</html>
使用<span>当作父级:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
.pic {
display: block;
width: 200px;
height: 200px;
background-color: pink;
text-align: center;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<span class="pic">
<img src="./images2/1.jpg" alt="">
</span>
</body>
</html>
结果如图:
(2)使用margin: o auto;实现<img>对齐
而margin:0 auto生效的条件是:
- 该元素是一个块级元素
- 元素具有宽度
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
img {
/*img为行内元素,需要将其转换为块级元素 */
display: block;
margin: 0 auto;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<img src="./images2/1.jpg" alt="">
</div>
</body>
</html>
结果如图:
(3)其它
当然,有时也可以使用padding等属性实现看起来对齐的效果,或者定位等其它方法,这里就不一
一举例展示了。
😁😁😁😁(●'◡'●)