如何使按钮中的文字垂直居中？

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

这在很大程度上取决于许多因素：

您 choose/font 权重的字体（某些字体可以渲染得比其他字体高或低）
按钮padding/border大小
显示类型

在下面的示例中，我明确设置了所有这些内容并且文本垂直居中，假设您的操作系统支持 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 2

   #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 and height 100vh (vertical hight).您可能需要在此处设置另一个号码。

2) #content .btn (general) 用缩进设置两个按钮的绝对位置。

3) #content .btn-teacher #content .btn-student 相应调整对齐方式。

Answer 3

您可以将按钮作为 <a> 元素，class 为 "button 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 4

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

why the text don't locate in the vertical center

如果您要使用行高，并且由于按钮有 2px 边框且不使用 border-box，行高需要为 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>

Answer 5

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

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>

很难将按钮中的文本垂直居中，这似乎有点可笑。必须知道 line-height 似乎有问题。

如何使按钮中的文字垂直居中？

How to make the text vertical center in the button?

html

css

centering