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


#1


https://www.codecademy.com/courses/web-beginner-en-UuBLw/0/6?curriculum_id=50579fb998b470000202dc8b


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.


#2

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


#3

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


#4

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.


#5

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