![6203100264988746f8b69b5d51a7a8c2.png](https://i-blog.csdnimg.cn/blog_migrate/c2d4f7723b3162ee4229da4b328b017e.png)
当前的最佳实践是,创建一个局部的容器,生成不可见文本(零宽空格,模拟 strut),可使任意内联元素能对齐邻近的文本:
const StrutAlign = ({
children}) => (
<span style={
{
display: 'inline-flex', alignItems: 'center'}}>
{
'u200b'/* ZWSP(zero-width space) */}
{
children}
</span>
)
<p>
<StrutAlign><MyIcon ></StrutAlign>左侧的任意按钮都能与我对齐
</p>
<p>
<StrutAlign><MyImage ></StrutAlign>左侧的任意图片都能与我对齐
</p>
关于对齐的常见问题
- 浏览器本身如何对齐图标和文本?
- 如何封装一个图标组件,使其无论大小如何变化,都能自动对齐临近的文本?
- 为什么明明使用了 flex,图标还是看起来差了 1 像素没对齐?
有两种让浏览器自行对齐的方式(CodePen demo:浏览器对齐):
一、 flex container
<button style={
{
display: 'inline-flex', alignItems: 'center'}}>
<Icons.Heart />
Like
</button>
缺陷:需要创建 flex 容器来包裹图标和文本,而不是仅仅通过修改图标的样式。
二、 vertical-align middle
<button>
<Icons.Heart style={
{
verticalAlign: 'middle'}} />
<span style={
{
verticalAlign: 'middle'}}>Like</span>
</button>
缺陷:需要创建额外标签将文本包裹起来,并且文本偏移了 baseline(将影响上下间距和相邻元素的对齐)。
虽然上面的方式达到了对齐效果,但浏览器本身如何决定图标放置,参照什么来放置?