CODEWITHSUNDEEP
htmlcss
RhinoTekMN
RhinoTekMN

Reputation: 39

Unable to center align button

I cannot figure out why this won't work? I am trying to get the button to center within the div. For some reason, not matter what I do the button justifies left within the div.

Here is my current HTML, which I thought would absolutely work, but no go.

<div class="row block well" id="section3">
        <h1 style="text-align:center">Client Testimonials</h1>
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <p id="quote">Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him.<br>
                <button class="buttonz" onclick="cycle()"><span>More </span></button>
            </p>
        </div>
        <div class="col-md-3"></div>
    </div>

And here is the CSS that is being addressed

.buttonz {
  display: inline-block;
  border-radius: 10px;
  background-color: #b5cfc1;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: auto;
}

.buttonz span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttonz span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.buttonz:hover span {
  padding-right: 25px;
}

.buttonz:hover span:after {
  opacity: 1;
  right: 0;
}

Can anyone find where I went wrong?

Upvotes: 0

Views: 3124

Answers (6)

Mukesh Panchal
Mukesh Panchal

Reputation: 1966

Try below css to get button in center.

.buttonz { display: block; margin: 0 auto; }

Upvotes: 2

Ashil John
Ashil John

Reputation: 7762

You need to change the button's display property to 'block' from 'inline-block'

.buttonz {   display: block;   .... }

or even,

.buttonz {   display: table;   .... }

https://jsfiddle.net/cjm5L59z/

If you're wondering why margin: 0 auto doesn't work with an inline-block element, refer these questions:

What is the difference between display: inline and display: inline-block?

div with display:inline-block margin 0 auto not center

Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 19986

Both your p tag and button need to have same display property. Since p tag is by default display: block; add the same to your button also.

.buttonz {
    display: block;
}

Here is a working demo.

<!DOCTYPE html>
<html>

<head>
    <style>
        .buttonz {
            display: block;
            border-radius: 10px;
            background-color: #b5cfc1;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 28px;
            padding: 20px;
            width: 200px;
            transition: all 0.5s;
            cursor: pointer;
            margin: auto;
        }
        
        .buttonz span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }
        
        .buttonz span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }
        
        .buttonz:hover span {
            padding-right: 25px;
        }
        
        .buttonz:hover span:after {
            opacity: 1;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="row block well" id="section3">
        <h1 style="text-align:center">Client Testimonials</h1>
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <p id="quote">Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him.
                <br>
                <button class="buttonz" onclick="cycle()"><span>More </span></button>
            </p>
        </div>
        <div class="col-md-3"></div>
    </div>
</body>

</html>

Upvotes: 1

Sreemat
Sreemat

Reputation: 626

Try this

Wrap a div around button and add style="text-align: center;" 

<div style="text-align: center;"> <button class="buttonz" onclick="cycle()"><span>More </span></button></div>

Upvotes: 0

Bhavin Shah
Bhavin Shah

Reputation: 2482

.buttonz {
  display: inline-block;
  border-radius: 10px;
  background-color: #b5cfc1;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: auto;
}

.buttonz span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttonz span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.buttonz:hover span {
  padding-right: 25px;
}

.buttonz:hover span:after {
  opacity: 1;
  right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row block well" id="section3">
        <h1 style="text-align:center">Client Testimonials</h1>
        <div class="col-md-3"></div>
        <div class="col-md-6 text-center">
            <p id="quote">Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him.<br>
                <button class="buttonz" onclick="cycle()"><span>More </span></button>
            </p>
        </div>
        <div class="col-md-3"></div>
    </div>

I just have put text-center class in col-md-6. and it works.

Here is JSFiddle

Upvotes: 0

Saugat Bhattarai
Saugat Bhattarai

Reputation: 2750

Why are you keeping button inside <p> tag? You can see this, which I have done for you in codepen.

Upvotes: 0

Related Questions