2

How to make the text vertical center in the button? I want to put the button text in the vertical center.

My code is here:

#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>

I set the line-height equal the height, why the text don't locate in the vertical center?

kukkuz
  • 41,512
  • 6
  • 59
  • 95
SCSOName
  • 107
  • 1
  • 3
  • 7
  • 1
    You can see different solutions here -> http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically – Sergio Rivas Sep 18 '16 at 05:01

5 Answers5

1

That highly depends on a number of things:

  • The font you choose/font weight (some fonts can render higher or lower than others)
  • Button padding/border size
  • Display type

In the example below I explicitly set all of these things and the text is vertically centered, assuming your operating system supports 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>
user2867288
  • 1,979
  • 16
  • 20
1
   #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);
   }

Where you mostly look at the following:

1) #content with position: relative and height 100vh (vertical hight). You may want to set another number here.

2) #content .btn (general) sets absolute position for both buttons with indent.

3) #content .btn-teacher #content .btn-student adjust alignments accordingly.

evgeny
  • 1,039
  • 1
  • 9
  • 26
1

You could have the buttons as <a> elements with a class of "button btn" and apply line height and appropriate padding. This allows the line height to apply and vertically center the text.

#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>
gavgrif
  • 15,194
  • 2
  • 25
  • 27
1

Since button element does that by default, just drop the line-height.

why the text don't locate in the vertical center

If you are gonna use line height, and as the button have a 2px border and not using border-box, the line height needs to be 36px.

I also added an anchor a element as a comparison.

.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>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • If the button has a 2px padding-top and a 3px padding-bottom, then I must use the height 40px delete the 2px padding-top and 3px padding-bottom and 4px border? Then I set the "line-height == 31px" ,it is OK? – SCSOName Sep 18 '16 at 23:04
  • @SCSOName Yes, that is correct, as padding and border is included in the buttons height (if not `box-sizing: border-box` is used), hence the space for the text is, in this case, 31px – Asons Sep 19 '16 at 16:33
1

AFAICT partly based on the accepted answer, you need to set the height and then also set the line-height minus any borders. Examples

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>

It seems kind of ludicrous that is so hard to actually vertically center the text in a button. Having to know the line-height seems problematic.

gman
  • 100,619
  • 31
  • 269
  • 393