时间戳

首页 > 解决方案 > 如何移动按钮文本？

html - 如何移动按钮文本？

问题描述

默认情况下，按钮文本水平居中，垂直居中。如何将按钮文本垂直对齐到顶部？

我检查了元素，它有 0 填充。

垂直对齐：文本顶部；不起作用。

标签： htmlcss

解决方案

可以通过 flexbox 来完成。首先，您可以在包含文本的按钮内添加一个跨度：

<button>
  <span>text</span>
</button>

而css会是这样的：

button {
    display: flex;
    align-items: center; //For vertical alignment [all values: flex-start | flex-end | center | baseline | stretch]
    justify-content: center; //For horizontal alignment [all values: flex-start | flex-end | center | space-between | space-around | space-evenly]
}

您可以试验要显示文本的位置。

推荐阅读