el-tooltip 文字提示 bottom flex布局下不居中

el-tooltip 文字提示 bottom flex布局下不居中

img

第二个偏离中心一点

img

第三个偏离中心挺多..

img

flex布局

display: flex;
align-items: center;
justify-content: space-between;

img

这种情况是咋回事昂？

button有边距影响了

el-tooltip是基于CSS的Tooltip组件，其显示位置和样式可以通过CSS进行调整。如果在使用flex布局时，el-tooltip的提示文字不能居中，可以通过以下步骤进行调整：

  1. 设置el-tooltip的position为absolute，这样可以使其脱离文档流，方便后续的调整。

  2. 设置el-tooltip的bottom为50%。这将使其距离父元素的底部距离为50%。

  3. 设置el-tooltip的transform属性为translateY(50%)。这将使其向上移动50%的高度，使其在垂直方向上居中。

下面是一个示例CSS样式：

.el-tooltip__popper {
  position: absolute;
  bottom: 50%;
  transform: translateY(50%);
}

你可以将上述CSS样式添加到你的样式表中，这样el-tooltip组件的提示文字就会在flex布局下居中了。