# img-icon导致按钮不对齐的原因分析
* 抖音：
* B站：
这是一个小伙伴发来的demo
他说啊只要给按钮里加上这个小图片
整个这个按钮就会跟其他按钮不对齐
即便呢
他给这个按钮加一个vertical等于middle
大家看
他就跑下边来了还是不对齐
那其实啊不光是这个小图片
我们先把图片注释掉
现在是正常的对吧
但是呢
如果我们给他用文字加一个vertical-align
等于middle
大家看他还是会往下跑
那文字加上vertical-align:middle它会往下跑
咱们上一期视频讲过
那为什么里边的文字往下跑之后
外边的按钮也跟着往下跑呢
我先把这个小图片恢复回来
（把这个先关掉）
然后把这个middle也去掉
大家看现在这种情况哈
那我先把它选中
大家注意看
其实啊从这个边缘到下边这块
在Button里
它是保持了一个垂直居重的状态
我为什么提这个呢
因为
这个Button上下偏移是跟这个有关系的
主要有两点决定因素
第一点就是button这个元素比较特殊
它会永远让里边的内容啊
保持一个垂直居中的状态
这个咱们一会试一下
第二个因素呢
就是这个button自身的vertical-align
等于baseline
也就是说
他要保持里边的内容是在整行
的贝斯兰对齐上
何以见得呢
我们可以测一下
我们在这加1个x x在这加1个x x
然
然后呢我们在这加1个background-color
我们来看一下啊
他们呀都是在这条贝斯兰上对齐的
有了这两点因
素呢大家看
里边的内容虽然向上偏移了
但是对于这个button来说
他既要保持里边的内容在baseline上
还要保持他们（整体在内部）垂直居中
所以外边的button会跟着也向上偏移
所以啊这种场景下
我们可以这样给这个button啊
加一个vertical-align
等于top什么意思呢
就是我们让这个button啊
保持跟整行的顶端对齐
保持这样的对齐这样就没问题了
至于说里边的这个小图片
怎么跟文字保持一个
比较好看的对齐状态
这个咱们前两期视频讲过
大家可以翻看一下
最后啊咱们再来验证一下
关于button里边内容垂直居中的问题
其实很好验证
我们在这儿
写个div然后里面写个button
大家看现在是这样的
然后呢我把它调高一点
height等于比如
看看垂直居中
所以它总是垂直居中的
我再给它加一个br
打开它总是让里边的内容垂直居中
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://sunzsh.gitbook.io/xiaoshan.bug/imgicon-dao-zhi-an-niu-bu-dui-qi-de-yuan-yin-fen-xi.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.