我正在建立一个网站,我想使按钮中的文本对齐,但是无法正常工作。
我尝试使用行高和框大小,更改显示方式,更改文本对齐方式等
.button {
background-color: rgb(71, 37, 85);
border: solid;
color: rgb(199, 173, 211);
padding: 20px 95px;
text-decoration: none;
display: inline-block;
max-width: 50px;
max-height: 30px;
border-radius: 12px;
}
文本未居中,就像超出按钮一样 Here's a codepen for you to try it
答案 0 :(得分:1)
由于您的填充和最大高度/最大宽度而出现问题。
尝试删除填充或删除最大宽度和最大高度。
答案 1 :(得分:1)
您已经设置了max-width: 50px;
和max-height: 30px;
,这会使按钮非常小(如果您删除了填充)。
因此,如果您将其删除,然后将填充设置为较小的padding: 10px 20px;
之类的,那么我认为您会找到一个更好的按钮选项。
.button {
background-color: rgb(71, 37, 85);
border: solid;
color: rgb(199, 173, 211);
padding: 10px 20px;
text-decoration: none;
display: inline-block;
border-radius: 12px;
font-size: 30px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.6s;
}
.button:hover {
background-color: rgb(155, 41, 139);
color: white;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
transform: scaleX(1.1) scaleY(1.1);
}
<a href="https://google.fr" class="button">Here's some text<a>
编辑:如果您要查找较小的内容,也可以更改font-size
。像这样:
.button {
background-color: rgb(71, 37, 85);
border: solid;
color: rgb(199, 173, 211);
padding: 10px 20px;
text-decoration: none;
display: inline-block;
border-radius: 12px;
font-size: 18px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.6s;
margin: 10px;
}
.button:hover {
background-color: rgb(155, 41, 139);
color: white;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
transform: scaleX(1.1) scaleY(1.1);
}
<a href="https://google.fr" class="button">Here's some text<a>
或者,如果您要在整个网站中寻找固定大小的按钮,则可以放置(例如)width: 150px
和text-align: center
。
.button {
background-color: rgb(71, 37, 85);
border: solid;
color: rgb(199, 173, 211);
padding: 10px 20px;
text-decoration: none;
display: inline-block;
border-radius: 12px;
font-size: 18px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.6s;
margin: 10px;
width: 150px;
text-align: center;
}
.button:hover {
background-color: rgb(155, 41, 139);
color: white;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
transform: scaleX(1.1) scaleY(1.1);
}
<a href="https://google.fr" class="button">Here's some text<a>
<a href="https://google.fr" class="button">Go here<a>
<a href="https://google.fr" class="button">Here is a link<a>
答案 2 :(得分:0)
由于填充而中断。尝试下面的代码。我评论了一些导致问题的原因。
.button {
background-color: rgb(71, 37, 85);
border: solid;
color: rgb(199, 173, 211);
/* padding: 20px 95px; */
text-decoration: none;
display: inline-block;
/* max-width: 50px; */
max-width: 150px;
max-height: 30px;
border-radius: 12px;
}
答案 3 :(得分:0)
问题是您的max-height和max-width限制了按钮的高度和宽度。删除最大宽度和最大高度。
答案 4 :(得分:0)
您必须考虑以下三点:最大宽度/高度,填充和显示。既然您已经提到display:inline和max-width / max-height。它搞砸了。这是解决方法
.button {
background-color: rgb(71, 37, 85);
border: solid;
color: rgb(199, 173, 211);
padding: 13px 68px;
text-decoration: none;
display: inline-block;
border-radius: 12px;
}
<button class="button"> BUTTON </button>
答案 5 :(得分:0)
以下是一些如何更改CSS的示例。您要指定一些非常大的左右填充值-最好设置一个较小的填充值(即20px),然后在宽度最小的元素中居中对齐文本。
下面的代码有四个按钮
您的原始样式是第一个按钮。第二个和第三个按钮显示了一些改进的样式,该样式使文本居中并确保按钮为设置的宽度。第三个按钮显示了设置宽度按钮和较长文本的问题-也就是说,溢出未被隐藏。
最后一个按钮显示改进的CSS以使文本居中,并使用省略号压缩溢出文本。
我建议删除以下几行:
padding: 20px 95px;
max-width: 50px;
并添加以下内容:
padding: 20px;
min-width: 200px;
max-width: 200px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
.button_new {
padding: 20px;
min-width: 200px;
max-width: 200px;
text-align: center;
}
.button_condense {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.button_old {
padding: 20px 95px;
max-width: 50px;
}
.button {
background-color: rgb(71, 37, 85);
border: solid;
color: rgb(199, 173, 211);
max-height: 30px;
text-decoration: none;
text-align: start;
display: inline-block;
border-radius: 12px;
font-size: 30px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.6s;
}
<a href=https://google.fr class="button button_old">Here's some text<a>
<a href=https://google.fr class="button button_new">Here's some text<a>
<a href=https://google.fr class="button button_new">Here's some text which is longer<a>
<a href=https://google.fr class="button button_new button_condense">Here's some text which is longer<a>