Question

如何在按钮中使文本垂直居中？我想把按钮文本放在垂直中心。

我的代码在这里：

#content {
  width: 900px;
  margin: 0 auto;
  text-align: center;
}
#content .btn {
  width: 120px;
  height: 40px;
  color: white;
  line-height: 30px;
}
#content .btn-teacher {
  background-color: rgb(120, 144, 156);
}
#content .btn-student {
  background-color: rgb(255, 112, 67);
}

<body>
  <div id="content">
    <button class="btn btn-teacher">I am a teacher</button>
    <button class="btn btn-student">I am a student</button>
  </div>
</body>

我将line-height设为height，为什么文字不在垂直中心？

Answer 1

AFAICT部分基于接受的答案，您需要设置高度，然后还设置线高减去任何边界。例子

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.line-height-border-1 {
  margin: 5px;
  border: 1px solid red;
  height: 30px;
  line-height: calc(30px - 1px * 2); /* 1px * 2 is top + bottom border */
  vertical-align: middle;
}

.line-height-border-2 {
  margin: 5px;
  border: 6px solid red;
  height: 30px;
  line-height: calc(30px - 6px * 2); /* 6px * 2 is top + bottom border */
  vertical-align: middle;
}

.line-height-border-3 {
  margin: 5px;
  border: 0.75em solid red;
  height: 30px;
  line-height: calc(30px - 0.75em * 2); /* 0.75em * 2 is top + bottom border */
  vertical-align: middle;
}

/* bad */
.line-height-border-4 {
  margin: 5px;
  border: 0.75em solid red;
  padding: 0.4em;
  height: 30px;
  /* 
  0.75em * 2 is top + bottom border 
  0.4em for padding
  */
  line-height: calc(30px - 0.75em * 2 - 0.4em); 
  vertical-align: middle;
}

/* bad */
.line-height-border-5 {
  margin: 5px;
  border: 0.75em solid red;
  padding: 0.4em;
  height: 30px;
  /* 
  0.75em * 2 is top + bottom border 
  0.8em for padding (top + bottom)
  */
  line-height: calc(30px - 0.75em * 2 - 0.4em * 2); 
  vertical-align: middle;
}

/* bad */
.line-height-border-6 {
  margin: 5px;
  border: 0.75em solid red;
  padding: 0.4em;
  height: 30px;
  /* 
  0.75em * 2 is top + bottom border 
  0.8em for padding (top + bottom)
  */
  line-height: calc(30px - 0.8em - 0.75em * 2); 
  vertical-align: middle;
}

.inline-flex {
  margin: 5px;
  display: inline-flex;
  border: 6px solid red;
  height: 30px;
  align-items: center;
}

.content-box {
  box-sizing: content-box;
  background: yellow;
}

<button class="line-height-border-1">
Vertically Centered?
</button>

<button class="line-height-border-2">
Vertically Centered?
</button>

<button class="line-height-border-3">
Vertically Centered?
</button>

<p>Unfortunately I couldn't figure out a rule for padding</p>

<button class="line-height-border-4">
Vertically Centered?
</button>

<button class="line-height-border-5">
Vertically Centered?
</button>

<button class="line-height-border-6">
Vertically Centered?
</button>

<div class="content-box">
<p>border-box: content-box</p>

<button class="line-height-border-1">
Vertically Centered?
</button>

<button class="line-height-border-2">
Vertically Centered?
</button>

<button class="line-height-border-3">
Vertically Centered?
</button>

<p>Unfortunately I couldn't figure out a rule for padding though in this case the first one seems centered</p>

<button class="line-height-border-4">
Vertically Centered?
</button>

<button class="line-height-border-5">
Vertically Centered?
</button>

<button class="line-height-border-6">
Vertically Centered?
</button>
</div>

<p>things that don't work, inline-flex<p>

<button class="inline-flex">
Vertically Centered?
</button>

<p>the text in the button above is too high</p>

似乎很难将文本垂直居中放置在按钮中。必须知道行高似乎有问题。

Answer 2

这在很大程度上取决于许多事情：

您选择的字体/字体粗细（某些字体可以渲染得比其他字体更高或更低）
按钮填充/边框大小
显示类型

在下面的示例中，我明确设置了所有这些内容，并且文本是垂直居中的，假设您的操作系统支持Arial。

        #content {
            width: 900px;
            margin: 0 auto;
            text-align: center;
        }
        #content .btn{
            font-family: Arial, sans-serif;
            display: inline-block;
            width: 120px;
            height: 40px;
            color: white;
            line-height: 40px;
            box-sizing: border-box;
            padding-bottom: 0px;
            padding-top: 0px;
        }
        #content .btn::-moz-focus-inner {
          padding: 0;
          border: 0
        }
        #content .btn-teacher {
            background-color: rgb(120,144,156);
        }
        #content .btn-student {
            background-color: rgb(255,112,67);
        }

<div id="content">
    <button class="btn btn-teacher">I am a teacher</button>
    <button class="btn btn-student">I am a student</button>
</div>

Answer 3

   #content {
       width: 900px;
       margin: 0 auto;
       padding: 0;
       text-align: center;
       position: relative;
       height: 100vh;
   }
   #content .btn{
     position: absolute;
     top: 50%;
     margin-top: 20px;
     right: 50%;
       width: 120px;
       height:40px;
       color: white;
       line-height: 30px;
   }
   #content .btn-teacher {
       margin-right: 60px;
       background-color: rgb(120,144,156);
   }
   #content .btn-student {
     margin-right: -60px;
       background-color: rgb(255,112,67);
   }

您主要关注以下内容：

1）#content with position：relative和height 100vh（vertical hight）。你可能想在这里设置另一个号码。

2）#content .btn（general）为缩进的两个按钮设置绝对位置。

3）#content .btn-teacher #content .btn-student相应调整路线。

Answer 4

您可以将按钮设为<a>元素，并使用“按钮btn”类，并应用行高和适当的填充。这允许行高应用并垂直居中文本。

#content {
  width: 900px;
  margin: 0 auto;
  text-align: center;
}
#content .btn {
  width: 120px;
  color: white;
  line-height: 40px;
  padding:15px;
  margin:10px;
  text-decoration:none;
}
#content .btn-teacher {
  background-color: rgb(120, 144, 156);
}
#content .btn-student {
  background-color: rgb(255, 112, 67);
}

<body>
  <div id="content">
    <a class="button btn btn-teacher" href="#">I am a teacher</a>
    <a class="button btn btn-student" href="#">I am a student</a>
  </div>
</body>

Answer 5

由于button元素默认执行此操作，因此只需删除line-height。

为什么文字不在垂直中心

如果您要使用线条高度，并且因为按钮具有2px边框而未使用latest version，则线条高度需要为36px。

我还添加了一个锚a元素作为比较。

.content {
  width: 900px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 10px;
}
.content .btn {
  width: 120px;
  height: 40px;
  color: white;
}

.content .btn2 {
  width: 120px;
  height: 40px;
  line-height: 36px;
  color: white;
}

.content a.btn {
  display: inline-block;
  width: 120px;
  height: 36px;
  line-height: 36px;
  border: 2px outset;
  color: white;
}

.content .btn-teacher {
  background-color: rgb(120, 144, 156);
}
.content .btn-student {
  background-color: rgb(255, 112, 67);
}

<body>
  <div class="content">
    <button class="btn btn-teacher">I am a teacher</button>
    <button class="btn btn-student">I am a student</button>
  </div>

  <div class="content">
    <button class="btn2 btn-teacher">I am a teacher</button>
    <button class="btn2 btn-student">I am a student</button>
  </div>

  <div class="content">
    <a class="btn btn-teacher">I am a teacher</a>
    <a class="btn btn-student">I am a student</a>
  </div>
</body>

如何使文本在按钮中垂直居中？

5 个答案: