Css button text issue

Question

I have a CSS button for my site which used to be full with the text in the very middle of it, but now the text is at the bottom and the button is smaller. Other people have had access to my root folder to make amendments and i dont know what they've done.

.button
{
    display: inline;
    margin-top: 2em;
    padding: 1em 2em 1em 2em;
    background: #8dc63f;
    letter-spacing: 0.20em;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.90em;
    color: #FFF;
}

.button:before
{
}

Mike your CSS is displaying the correct output jsfiddle.net/Z2qfZ .Possibility is that you are overriding this CSS somewhere else. — Zword
– Zword, Commented Jan 17, 2014 at 9:15

NoobEditor · Accepted Answer · 2014-01-17 09:11:54Z

3

try: display: inline-block

That should sort it.

edited Jan 17, 2014 at 9:11

NoobEditor

16k20 gold badges85 silver badges117 bronze badges

answered Jan 17, 2014 at 9:11

Samp

3853 gold badges4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Over a year ago

This sorted it :) Thanks and thanks everyone for their answers

Sowmya · Accepted Answer · 2014-01-17 09:13:14Z

0

Add display: block; and text-align:center;

    .button{
    display: block;
    text-align:center;
    margin-top: 2em;
    padding: 1em;
    background: #8dc63f;
    letter-spacing: 0.20em;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.90em;
    color: #FFF;
   }

DEMO

answered Jan 17, 2014 at 9:13

Sowmya

27k21 gold badges102 silver badges137 bronze badges

Comments

JDGuide · Accepted Answer · 2014-01-17 09:14:12Z

0

You can try this :-

text-align: center;
display:table-cell;
vertical-align:middle;

Hope it will help you.

answered Jan 17, 2014 at 9:14

JDGuide

6,50112 gold badges52 silver badges67 bronze badges

Collectives™ on Stack Overflow

Css button text issue

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related