请问div内部的img为什么不受div样式的束缚？

我在button按钮中添加了一个图标和文字，index代码如下

            <button className={styles.buttonstyle}>
<div className={styles.imagewrapper}>
<img src={changeButton}/>
</div>
切换
</button>

less代码如下：

.buttonstyle{
color:#84b0d9;
background-color:#ffffff;
border-radius:13px;
width:75px;
height:25px;
font-size:14px;
border:0;
outline:none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
cursor: pointer;
display: flex;
align-items: center;
}
.buttonstyle:hover{
color:#1890ff;
}
.imagewrapper{
width:14px;
height:12px;
margin-right:6px;
display: table-cell;
vertical-align: middle;
}

我用imagewrapper样式限制了img外层div的大小，但是这层div没能限制住img，图片还是非常大，如下图中文字下部的淡蓝色部分所示

于是给图片设置宽高,宽和高与imagewrapper宽高一样

            <button className={styles.buttonstyle}>
<div className={styles.imagewrapper}>
<img src={changeButton} style={{width:'14px',height:'12px'}}/>
</div>
切换
</button>

结果div的imagewrapper对应的区域如下图所示，是居中对齐的
请问div内部的img为什么不受div样式的束缚？

但是img对应的区域却在偏下的位置
请问div内部的img为什么不受div样式的束缚？

为什么img不在div的区域内呢？图片大小没有超过div，而且设置了div内部元素垂直居中。

虽然调整img的margin可以解决问题，但是我想知道这个问题的原因，请赐教

img 是行内替换元素，从排版的角度来看与行内块元素表现一致：其在行内的垂直位置受父元素的 vertical-align 和line-height 约束，而且在各浏览器表现不一致，调margin也不能完全兼容。
可以让图片隐形，然后把图片链接作为其父元素的背景，居中contain。
或者用字体图标。

回答

以上是 请问div内部的img为什么不受div样式的束缚？ 的全部内容， 来源链接： utcz.com/a/110456.html

回到顶部