How to align the text horizontally in the middle of the button?

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/courses/web-beginner-en-UuBLw/0/6?curriculum_id=50579fb998b470000202dc8b

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
I was able to use padding to center the text but that increased the size of the button as well.


With padding:

Without padding:

I want to achieve the same result that I did with padding but keeping the original proportions of the div block.

there are many different ways to do it you could use margin or line height to set the position

you could add:

div { box-sizing: border-box }

this will make padding and border part of the width and height of an element, rather then expanding it. You can also read this brilliant guide about centering

you can read more about box-sizing here

1 Like

Thanks. I was able to use box-sizing along with padding to achieve that. I did read that website about centering stuff but it didn’t help. I guess I needed that box-sizing trick.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.