Question

任何人都知道为什么我的文字不会居中？以及我如何解决它？我尝试使用text-align：center但它仍然无效。

.btn-orange {
    margin-top:10px;
    width: 200px;
    text-align: center !important;
    margin:1px;
    color: #fff;
    background-color: #e3690b;
    border-color: #e3690b;
    padding: 20px 50px 10px 10px;
    border-radius: 10px;
    font-size: 27px;
    font-stretch: ultra-expanded;
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
}

 <button type="button" class="btn-orange" style="text-align:center !important;">Value<br> My Videos</button>

Answer 1

padding: 20px 50px 10px 10px;

右上角和左下角不匹配。

尝试padding: 10px 20px 10px 20px;

Answer 2

这是一支笔https://codepen.io/anon/pen/GvpLBJ

你有不平等的填充，导致文本以奇怪的方式移动。我做的是删除一堆属性并添加填充：20px 20px;它在所有侧面（顶部，右侧，底部，左侧）创建相等的填充（意味着按钮内部的间距）。您可以通过以下几种方式声明填充：

padding: 20px; since its equal on all sides,

padding: 20px 20px; the first 20px applies to top and bottom and the second 20px to right and left

padding: 20px 20px 20px 20px; this goes in the direction of a clock, meaning top, right, bottom, left,

padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;

所有这些都会做同样的事情，唯一的区别在于代码长度。

在引导按钮中居中文本

2 个答案: