如何将文本集中在按钮内

Question

我正在SquareSpace上建立我的新网站，我想让我的登陆页更花哨一点。

我有这个按钮在这里(" button 49，"从https://getcssscan.com/css-buttons-examples)。

我现在的问题是让文字居中，并能够调整大小。

我试过这个text-align，但没有任何改变，也试图与line-height混淆，但认为只是时髦;而对于按钮的大小，我可以在那里打乱输入，但如果我这样做的文本没有居中，它会变得奇怪。

我使用的是自定义字体，但你可以使用Arial来可视化。

欢迎任何帮助，我不知道代码语言或如何解释我的问题，但感谢阅读。

你可以看到在图片上，有一个错误的红色圆圈和文字似乎有点向下image OF BUTTON

下面是我当前的代码:

button,
button::after {
width: 380px;
height: 86px;
font-size: 36px;
font-family: 'Industry Inc Base';
background: linear-gradient(45deg, transparent 5%, #fff 5%);
border: 0;
color: #000;
letter-spacing: 3px;
text-align: center;
line-height: 80px;
box-shadow: 8px 0px 0px #282828;
outline: transparent;
position: relative;
}
button::after {
--slice-0: inset(50% 50% 50% 50%);
--slice-1: inset(80% -6px 0 0);
--slice-2: inset(50% -6px 30% 0);
--slice-3: inset(10% -6px 85% 0);
--slice-4: inset(40% -6px 43% 0);
--slice-5: inset(80% -6px 5% 0);
content: 'ENTER';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 3%, #FF5E1A 3%, #7b00ff 5%, #FF5E1A 5%);
text-shadow: -3px -3px 0px #7b00ff, 3px 3px 0px #FF5E1A;
clip-path: var(--slice-0);
}
button:hover::after {
animation: 1s glitch;
animation-timing-function: steps(2, end);
}
@keyframes glitch {
0% {
clip-path: var(--slice-1);
transform: translate(-20px, -10px);
}
10% {
clip-path: var(--slice-3);
transform: translate(10px, 10px);
}
20% {
clip-path: var(--slice-1);
transform: translate(-10px, 10px);
}
30% {
clip-path: var(--slice-3);
transform: translate(0px, 5px);
}
40% {
clip-path: var(--slice-2);
transform: translate(-5px, 0px);
}
50% {
clip-path: var(--slice-3);
transform: translate(5px, 0px);
}
60% {
clip-path: var(--slice-4);
transform: translate(5px, 10px);
}
70% {
clip-path: var(--slice-2);
transform: translate(-10px, 10px);
}
80% {
clip-path: var(--slice-5);
transform: translate(20px, -10px);
}
90% {
clip-path: var(--slice-1);
transform: translate(-10px, 0px);
}
100% {
clip-path: var(--slice-1);
transform: translate(0);
}
}

<p><a href="https://www.aymob.net/portfolio"><button class="button">Enter</button></a></p>

Answer 1

文本'Enter'位于按钮的中心，所以这很好。默认情况下，按钮内的文本居中，因此您可以在CSS中省略text-align: center;。

将按钮居中的一种方法是使用CSS flex布局。这是通过将内容包装在一个弹性容器中来实现的(参见下面的CSS代码)。这可以是您最初拥有的p元素，但由于这不是一个真正的段落，因此我将使用div元素。

关于"故障文本"显示低于按钮文本，这可能是由于字体确实。我把它改成了font-family: 'sans-serif';，对我来说看起来很好。

最后，请注意，在锚标记中包装按钮是非法的。你必须把你的锚标签(也就是你的"链接")放在按钮标签里面。

div {
font-family: 'sans-serif';
display: flex;
justify-content: center;
}
button,
button::after {
width: 380px;
height: 86px;
font-size: 36px;
background: linear-gradient(45deg, transparent 5%, #fff 5%);
border: 0;
color: #000;
letter-spacing: 3px;
line-height: 80px;
box-shadow: 8px 0px 0px #282828;
outline: transparent;
position: relative;
}
button::after {
--slice-0: inset(50% 50% 50% 50%);
--slice-1: inset(80% -6px 0 0);
--slice-2: inset(50% -6px 30% 0);
--slice-3: inset(10% -6px 85% 0);
--slice-4: inset(40% -6px 43% 0);
--slice-5: inset(80% -6px 5% 0);
content: 'ENTER';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 3%, #FF5E1A 3%, #7b00ff 5%, #FF5E1A 5%);
text-shadow: -3px -3px 0px #7b00ff, 3px 3px 0px #FF5E1A;
clip-path: var(--slice-0);
}
button:hover::after {
animation: 1s glitch;
animation-timing-function: steps(2, end);
}
@keyframes glitch {
0% {
clip-path: var(--slice-1);
transform: translate(-20px, -10px);
}
10% {
clip-path: var(--slice-3);
transform: translate(10px, 10px);
}
20% {
clip-path: var(--slice-1);
transform: translate(-10px, 10px);
}
30% {
clip-path: var(--slice-3);
transform: translate(0px, 5px);
}
40% {
clip-path: var(--slice-2);
transform: translate(-5px, 0px);
}
50% {
clip-path: var(--slice-3);
transform: translate(5px, 0px);
}
60% {
clip-path: var(--slice-4);
transform: translate(5px, 10px);
}
70% {
clip-path: var(--slice-2);
transform: translate(-10px, 10px);
}
80% {
clip-path: var(--slice-5);
transform: translate(20px, -10px);
}
90% {
clip-path: var(--slice-1);
transform: translate(-10px, 0px);
}
100% {
clip-path: var(--slice-1);
transform: translate(0);
}
}

<div><button class="button"><a href="https://www.aymob.net/portfolio">Enter</a></button></div>