why won't this css button center inside div?

Question

So... this is starting to annoy me ... and I thought i would come here and get some help..

The main div around the box has a width... then there is text... and a button that i want in the center of the div..

it is a <a href> button.. but it wont center.

I didn't think I would need to specify a width since the outside div has a width.. i tried margin:0 auto; text-align:center etc nothing works

<h2 class="service-style color_service">Annoyed</h2>
<div class="service-text text1">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet…
    </p>

    <a href="" class="button button-large"><i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More</a>
</div>

here is the fiddle link

http://jsfiddle.net/2gMQ9/

Guam

Side note: In IE9 there seems to be much more broken than just the button. – Handclap

Easiest way would be to wrap it in another div but this code you have is uhhh :) I am guessing you are beginner so keep working on it you will get better :) – Keratose

Answer 1

You have the problem because of the display:inline-block...see here

In this section of css,add:

Remove all the margin's set at buttonclass and amend as below:

/*  --------------------------------------------------
    :: Button Configuration
    -------------------------------------------------- */
 .button {
    display:block; /* change this from inline-block */
    width:20%; /* setting the width */
    margin:0 auto; /* this will center  it */
    position:relative;
    font-style:normal;
    font-weight:normal;
    font-family:"Open Sans";
    font-size:14px;
    outline:none;
    color:#fff;
    border:none;
    text-decoration:none;
    text-align:center;
    cursor:pointer;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    background-color:#96aa39;
    border-bottom:1px solid #7b8b2f;
}

EDIT : to use inline-block without setting a width

inline-block demo

How to do only solution to center inline-block element is to use text-align:center

in your css class:

.service-text {
text-align: center; /* add this to center the button */
}

and then add:

.service-text p{
 text-align:left /* and then add this to left align the text inside the para*/
}

this way you wont need to give width and only padding would solve your problem!

Wean

I know that when I add a width it will center.. the point is not to have a width tot he button and just using padding to expand it. that if i use block it will expand across the whole div... that is why i used inline-block... but text-alight center did not work for some reason. – Guam

hey, yes it work... I have a little issue though.. jsfiddle.net/Qt9u3/6 I could not get the buttom to fit inside the div.. it was always floating outside the div like in my other thread but not when i use float : left it wont center no more... – Guam

@Guam : posted the answer in your question...height was missing for the document!! – Wean

Answer 2

Your button needs to be a block level element. Simplest fix:

a.button-large{  
    padding : 15px 30px 14px 30px;
    margin  : 5px auto;
    display : block;
    width   : 100px;
}

http://jsfiddle.net/jqvbM/

I would also delete the 10px right margin on a.button-large i to center the "Learn More" text.

Moult

the point is not to use a width.. so the button expands with the padding alone.. the width would restrain the button size... that is why i used inline-block because block expand it full width with actual width set in place.. – Guam

Answer 3

You need to put the text-align:center; to the parent element of the button in your case is the div.service-text.

if you want the top P to be text-align:right; please use diffrent P to the button

remember. if your element is display:block; so you need to give margin: 0 auto; to your element. if your element is display:inline-block; you need to give text-align:center; to the parent element.

Preventer

Answer 4

check fiddle here

you have to modify your css like below: - remove margin from a.button-large class - and change display:table in .button class

a.button-large{  
    padding:15px 30px 14px 30px;    
}


.button{
display:table;
position:relative;
font-style:normal; 
font-weight:normal; 
font-family:"Open Sans"; 
font-size:14px;
margin:0 auto;
outline:none;
color:#fff;
border:none;
text-decoration:none;
text-align:center;
cursor:pointer;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}

Cannikin

Answer 5

Quick way is to add "text-align: center;" to .service-text.

Excaudate

Answer 6

I would suggest dialing it back a little and divorce yourself from your framework or whatever you are using. To center things horizontally there are 2 approaches.

You have to decide based on whether you want the button to be position: inline, inline-block, or block. For mobile and fingers and all that stuff(2014) - I would suggest inline-block or block. So -

if it's inline block, then you can just treat it like text. Set the parent to text-align center;

If it's block, then you you can use margin-right: auto; margin-left: auto; but that has other issues. Like all the other thinks near it need to be organized properly so that they don't float all over each other and screw everything up. I would suggest you do it like this: jsfiddle

PS - we don't need to see so much code in your fiddle. It's easier to get to the rout of the problem with only the bare necessities. Good luck.

HTML

<aside class="service">

    <header>
        <h2 class="">Title of module thing</h2>
    </header>

    <div class="text-wrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet…</p>
        <a href="#" class="button button-large"><i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More</a>
    </div> <!-- .text-wrapper -->

</aside> <!-- .service -->

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
} /* start your projext off right */


.service {
    border: 1px solid #2ecc71;
    font-family: helvetica;
    text-align: center;
}

.service header {
    background-color: #2ecc71;  
}

.service header h2 {
    font-size: 1.3em;
    font-weight: 400;
    color: white;
    /* text-align: center; */ /* the parent should have this - not the element */
    /* width: 100%; */ /* this is already default because it is a block element */
    margin: 0;
    padding: .5em;
}

.service .text-wrapper {
    padding: 1em;
}

.service p {
    text-align: left;
    font-size: .9em;
}

.button {
    display: inline-block; /*so it's like... "inline" - and can be centered */
    background-color: #2ecc71;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    padding: 1em 2em;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

Impedimenta

Answer 7

Try to include your button in a div and update CSS as given below

<div class="check">
     <a href="" class="button button-large"><i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More</a>
 </div>

`CSS`
.check
{
    width: 150px;
    margin:auto;

}

Beverie

Answer 8

Wrap the button in an element and give it text-align:center.

Write:

<div class="center">
        <a href="" class="button button-large"><i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More</a>
</div>

.center {
    text-align:center;
}

Updated fiddle here.

Steelyard

Answer 9

Try this

<div style="text-align:center;">
    <a href="" class="button button-large"><i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More</a>
</div>

DEMO

Chilung