Centering text within a button

Question

I'm learning Front end development and I'm trying to code my first site using bootstrap. I got stuck on a pretty simple thing I guess. How do I center a text within a button ?

This is the button, the default one using an "a" tag.

<a class="btn btn-default btn-work" href="#">Check my work</a>

and gave it a width and a height and the text remains stuck on the top..

.btn-work {
    width: 250px;
    height: 50px;
    margin: 0 auto;
    vertical-align: middle;
}

I'm also trying to align the button to the center of the container and I can't figure that out either.

Thanks !

score 30 · Accepted Answer · answered Aug 24 '15 at 17:59

30

To center the text within the button. Use this code.

.btn-work{ text-align: center; }

To center the button, use a parent div to align it to center.

CSS:

 div.parentElement{text-align: center;}
 .btn-work{ display: inline-block; }

HTML:

<div class="parentElement">
    <a class="btn btn-default btn-work" href="#">Check my work</a>
</div>

Full CSS:

div.parentElement{text-align: center;}

.btn-work {
    width: 250px;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    display: inline-block;
    line-height: 50px;
    text-align: center;
}

answered Aug 24 '15 at 17:59

K.Shrestha

567
3
8

Thanks a lot !! I just registered on stackoverflow and honestly I wasn't expecting that I'll get an answer this quick. – Ovidiu G Aug 24 '15 at 18:05
Hey @OvidiuG You wanted to center the text inside the button right? – Lal Aug 24 '15 at 18:07
Yes, that's right. I got it centered now but seems like I have another problem. Because that I have a button made by a 2px border the button is not centered properly. I hope I'll find the answer on google :D – Ovidiu G Aug 24 '15 at 18:14
You can search for box-model term in google. I have quick code for you to work. .btn-work{box-sizing: border-box;} – K.Shrestha Aug 24 '15 at 18:25
1

`padding: 0` fixed it for me – Marc Sloth Eastman Jan 30 '20 at 15:24

score 7 · Answer 2 · answered Aug 24 '15 at 17:50

7

See this fiddle

Use

display: table-cell;
vertical-align: middle;

in your CSS for .btn-work.

So, the complete CSS would be like

.btn-work {
    width: 250px;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
}

And, the output of the above one be like

answered Aug 24 '15 at 17:50

Lal

14,726
4
45
70

also text-align:center to align to center of the available width – radiant Aug 24 '15 at 17:57
No need for that @radiant. Its already specified there in bootstrap css ->`.btn` – Lal Aug 24 '15 at 18:01

score 3 · Answer 3 · answered Mar 09 '21 at 12:33

3

I just discover it.

Just use

line-height: 0px;

in your button CSS.

Now, your CSS will look like this:-

.btn{ line-height: 0px;}

answered Mar 09 '21 at 12:33

Deepanshu tyagi

61
1

score 2 · Answer 4 · answered Aug 27 '21 at 16:01

2

Sometimes using text-align: center does not work, even on the parent element.

You may need:

padding: 0;

answered Aug 27 '21 at 16:01

pkucas

158
6

score 0 · Answer 5 · answered Aug 24 '15 at 17:57

0

In here you make a link as a button. You can make a button inside tag.

 <a class="btn btn-default btn-work" href=""><input type="button" class="btn btn-default btn-work" value="Check my work"/></a>

answered Aug 24 '15 at 17:57

NAZ

31
1
6

It might work but it would not be a valid markup. "Element 'button' must not be nested within element 'a button'. Refer this thread, http://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5 – radiant Aug 24 '15 at 18:02

score 0 · Answer 6 · answered Jun 03 '23 at 12:00

0

You can use

button {
  justify-content: center;
}

On the button itself, you can make a class for all the buttons and apply the css

answered Jun 03 '23 at 12:00

Jothish

1
2

Centering text within a button

6 Answers6

See this fiddle

Linked