Kevin Powell - Community•17mo ago

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

button.list-record-button {
  height: 9%;
  width: 75%;
  margin: 2rem auto;
  line-height: 1rem;
  text-align: center;
}

button.list-record-button {
  height: 9%;
  width: 75%;
  margin: 2rem auto;
  line-height: 1rem;
  text-align: center;
}

fossjam

CodeSandbox

ict_birthday-list - CodeSandbox

ict_birthday-list by fossjam using parcel-bundler

12 Replies

croganm•17mo ago

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

Fourth_quarterOP•17mo ago

How would you set the h/w of a button?

croganm•17mo ago

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

Fourth_quarterOP•17mo ago

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.

croganm•17mo ago

Perfect. I'll use that

Fourth_quarterOP•17mo ago

done

Kate•17mo ago

I think it's because your button is being displayed as a flex container, because of this line:

section.section-one > * {
  display: flex;
}

section.section-one > * {
  display: flex;
}

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:

button.list-record-button {
  justify-content: center;
  align-items: center;
}

button.list-record-button {
  justify-content: center;
  align-items: center;
}

Your button is a flex container. So, just use justify and align to center the contents.

Fourth_quarterOP•17mo ago

Understood. Thanks!

croganm•17mo ago

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

.section-one {
  height: 440px;
  min-height: 440px;
  width: 280px;
  min-width: 280px;
  background-color: var(--card-background);
  border-radius: 10px;
  padding-left: 30px;
  padding-right: 30px;
}

section.section-one > * {
  list-style: none;
  display: flex;
  flex-direction: column;
  row-gap: 1.4rem;
}

button.list-record-button {
  margin: 2rem auto;
  padding: 2rem;
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.section-one {
  height: 440px;
  min-height: 440px;
  width: 280px;
  min-width: 280px;
  background-color: var(--card-background);
  border-radius: 10px;
  padding-left: 30px;
  padding-right: 30px;
}

section.section-one > * {
  list-style: none;
  display: flex;
  flex-direction: column;
  row-gap: 1.4rem;
}

button.list-record-button {
  margin: 2rem auto;
  padding: 2rem;
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%;
}

This gives you a similar solution to what you're looking for, but it's a little more fullproof 🙂

croganm•17mo ago

Fourth_quarterOP•17mo ago

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?

croganm•17mo ago

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 🙂

Gaming

Programming

Issue with centering button text