css - how to center the span text in rounded button

Question

CodeSandbox:
https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/main.js

I want to center the - text in the button, but I cannot find a way to do it.

html

  <button class="round-button align-middle mr-1">
    <span>-</span>
  </button>

css

.round-button {
  min-width: 20px;
  max-height: 20px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: none;
  color: white;
  background-color: #3498db;
  border-radius: 100%;
  overflow: none;
  text-align: center;
  padding: 0;
}
.round-button:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
}

I saw your code sandbox and it looks like the text is centered, but you need to increase the width of you button . — Random COSMOS, Jul 11 '21 at 04:51
do you mean center vertically, if so then as Muzamil301 said use display: flex; and align-items; center; — Random COSMOS, Jul 11 '21 at 04:58
I believe @Rahul Kapuriya answer is more complete and descriptive and should be chosen as answer. — Mike Lucid, Jul 11 '21 at 12:21

score 2 · Accepted Answer · answered Jul 11 '21 at 07:20

html

<button class="round-button align-middle mr-1">-</button>

css

.round-button {
  min-width: 20px;
  height: 20px;
  border-style: none;
  color: white;
  background-color: #3498db;
  border-radius: 50%;
  text-align: center;
  padding: 0;
  line-height: 20px; // to center text vertically
}

You just need to add the same line-height as your button's height and don't need an extra span element to add text. I've also removed unnecessary styles.

score 1 · Answer 2 · answered Jul 11 '21 at 05:01

1

Try setting line-height: 20px to that. If it still looks off, you might be using a custom font with non-standard line height. In this case play with the line-height property until it looks okay.

answered Jul 11 '21 at 05:01

Atanas Atanasov

506
7
11

score 0 · Answer 3 · answered Jul 11 '21 at 07:06

0

Add the following style properties to .round-button:

.round-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

And, remove style for .round-button:before.

answered Jul 11 '21 at 07:06

Praveen

187
6

score 0 · Answer 4 · answered Jul 11 '21 at 07:13

Try this.

.round-button {
  background-color: #3498db;
  border-style: none;
  border-radius: 100%;
  color: #fff;
  cursor: pointer;
  
  aspect-ratio: 1 / 1;
  width: 48px;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

  <button class="round-button">
    <span>-</span>
  </button>

Ellen · Answer 5 · 2021-07-14T03:54:55.783

-1

Try changing <span>-</span> to <span style="position:relative; left:0px; top:-3px">-</span>. If it doesn't look right you can play around with it.

edited Jul 14 '21 at 03:54

answered Jul 11 '21 at 07:00

Ellen

1
1

css - how to center the span text in rounded button

5 Answers5