Why can I not style the text inside the button?

Question

This is my button. My button is not centered, and I can't seem to edit the text inside.

Other postings suggest putting a span around the button's content, which I did, but it doesn't seem to work. I tried changing the letters to be pink just to see if it would do anything, but it did not. Presumably, here also would be where I could fidget with the placement inside the button, no? Here is my code.

<Button bgColor="#609D64" style={{ marginTop: '-17px' }}>
    <span style={{ color: 'pink' }}>START
    </span>
</Button>

Are you using a templating system? – i alarmed alien Aug 06 '18 at 23:16 — i alarmed alien, Aug 06 '18 at 23:16

score 1 · Accepted Answer · answered Aug 06 '18 at 23:24

1

You don't need the span. Try using flexbox.

I've added the styles

display: flex;
justify-content: center;
align-items: center;

This should make the text centered both vertically and horizontally.

<Button style={{ display: flex; justify-content: center; align-items: center; text-align: center; color: pink; background: #609D64; }}>START</Button>

btw it's not good to inline styles unless you really have to. also if this code doesn't fix you problem then please show what html Button outputs because it may be the rendered component is causing the problem.

answered Aug 06 '18 at 23:24

Pixelomo

6,373
4
47
57

1

But keep in mind, that older browsers won't support flexbox. – Aug 07 '18 at 06:01
good point @D.Schaller. This could equally be achieved just using text-align center & padding – Pixelomo Aug 07 '18 at 06:36
But what about safari does flex items works on safari, if works how? – Minal Munakarmi Aug 13 '18 at 04:08
using vendor prefixes https://stackoverflow.com/questions/24899943/how-do-i-make-flex-box-work-in-safari – Pixelomo Aug 13 '18 at 04:57

score 0 · Answer 2 · edited Aug 07 '18 at 05:55

0

It should work for you.

<Button style="margin-top:-17px; background-color:#609D64; text-align:center">
<span style="color:pink">START
</span>
</Button>

edited Aug 07 '18 at 05:55

4b0

21,981
30
95
142

answered Aug 07 '18 at 03:54

Minal Munakarmi

177
4

Yes it works css on span Like Button span{ color:pink; font-size:55px; } – Minal Munakarmi Aug 07 '18 at 06:14

score 0 · Answer 3 · edited Jul 13 '20 at 04:58

This is a solution using flex. There is an inline-flex declaration –

button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 6px 12px;
  border: 1px solid #CDCDCD;
  background: #FFF;
  color: hotpink;
}

<p><button>hello world</button> Welcome to the water planet!</p>

This is an especially important detail to know when mixing flex into inline-block layouts.

Why can I not style the text inside the button?

3 Answers3