按钮和文字对不齐

Question

右边的文字总是高于左边的按钮。怎样能对齐？
发现字体大于等于12才能对齐。

怎样解决，请教。

<div style='width:158px;'><div style='float:left;'><button>坐标按钮</button></div><div style='float:left;font-size: 9px;'>右边文字</div></div>

Answer 1

可以参考下这个，先清除浮动再用flex布局
https://codesandbox.io/s/swee...

Answer 2

字体小于12是行不通的。 居中的话，还是用flex实现简单一些

    display: flex;
    align-items: center;
    

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 3

没看懂，你是要垂直居中对齐？那有很多方法，最简单就是flex了，但是这个对齐跟字体没啥关系的说。
不能小于12是浏览器的限制，你可以在浏览器（以chrome为例）设置-外观-自定义字体-最小字号，调整允许的最小值

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 4

最简单的办法是设置文字跟按钮一样的高度，然后在设置文字垂直居中。
{

height: 23px;
line-height: 23px;

}

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 5

PC端各个浏览器有最小字号限制。大部分是12px。

当然，你可以通过缩放实现相应的小字号。

transform:scale(0.5)  //使用scale进行缩小

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。