Issue with centering button text
I have a button with the following direct styling. The internal text will not center and I have tried various methods, but the goal is to align the internal text both vertical and horizontal.
TRIED:
padding: 0;
padding: auto;
Here is the entire code...https://codesandbox.io/s/ict-birthday-list-fdh3kc?file=/index.html
12 Replies
At this point we'd need to see a live example then. I also wouldn't set the height and width of a button directly but either way, please send a reproducible example.
That can be done with codepen, jsfiddle, codesandbox, etc
And we also need the full code
How would you set the h/w of a button?
Just let the content dictate it and then use padding
or using flex/grid of a parent container, depending on what you're going for
I'm not sure how to do this so if you could explain via some example that would be great. Thanks. I am adding a link to live code example.
Perfect. I'll use that
done
I think it's because your button is being displayed as a flex container, because of this line:
Set your button to use
display: block
, or something other than flex.
ACTUALLY - I'm not thinking properly. Although my previous answer does center the text, it changes the button's display property when that isn't always desired.
The solution is simple:
Your button is a flex container. So, just use justify and align to center the contents.Understood. Thanks!
Exactly what was mentioned earlier is how you would resolve that button issue :).
Now about how to size the button the way you're looking for. With how you set up the HTML and CSS, you'll likely need a
width: 100%
on there. But, at least we can set padding to control the height and if the button gets to big, it will wrap properly.
But, instead of setting margin-left
on every single element, just set a padding-left
in the .section-one rule. While at it, also add a padding-right
to prevent anything from getting too close to the end of the box.
So, here's the adjusted CSS
This gives you a similar solution to what you're looking for, but it's a little more fullproof 🙂![](https://cdn.answeroverflow.com/1135585733248303184/image.png)
Thanks, this works well. When you say fullproof, fullproof from what? adjustments to the size of the container? Wouldn't using the percentages for height and width have done the same?
Well let's say you increased the text within the button. If it got so long that it had to wrap, the button would not get taller, and would begin to look a little messed up.
It's rare you get multiline buttons but it can happen on mobile sometimes, so it's good just to be a little more thoughtful with it, especially because it didn't really require any major changes, just 4 lines of code or so 🙂