CODEWITHSUNDEEP
cssbuttoncenter
Stevanicus
Stevanicus

Reputation: 7761

Button Center CSS

Usual CSS centering issue, just not working for me, the problem is that I don't know the finished width px

I have a div for the entire nav and then each button inside, they dont center anymore when there is more than one button. :(

.nav {
  margin-top: 167px;
  width: 1024px;
  height: 34px;
}

.nav_button {
  height: 34px;
  margin: 0 auto;
  margin-right: 10px;
  float: left;
}
<div class="nav">
  <div class="nav_button">
    <div class="b_left"></div>
    <div class="b_middle">Home</div>
    <div class="b_right"></div>

  </div>
  <div class="nav_button">
    <div class="b_left"></div>
    <div class="b_middle">Contact Us</div>
    <div class="b_right"></div>

  </div>
</div>

Any help would be greatly appreciated. Thanks

Result

If the width is unknown, I did find a way a center the buttons, not entirely happy but doesnt matter, it works :D

The best way is to put it in a table

<table class="nav" align="center">
    <tr>
      <td>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>
        </div>

        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>
        </div>
      </td>
    </tr>
  </table>

Upvotes: 107

Views: 587636

Answers (7)

markbaldy
markbaldy

Reputation: 2543

I stumbled across this problem today and I got it to work with

<div style="text-align:center;">
    <button>button1</button>
    <button>button2</button>
</div>

Upvotes: 237

MD MOSHAROF AL AHSAN
MD MOSHAROF AL AHSAN

Reputation: 1

In HTML you can write,

<div id="btn">
<button>Click</button>
</div>

if you work with JS instead of CSS, you can write this to move the button to center.

const bu = document.getElementById("btn");
bu.style.cursor="pointer";
bu.style.justifyContent="center";
bu.style.display="flex";

Upvotes: 0

Israr Awan
Israr Awan

Reputation: 55

Consider adding this to your CSS to resolve the problem:

.btn {
  width: 20%;
  margin-left: 40%;
  margin-right: 30%;
}

Upvotes: 2

Amin
Amin

Reputation: 1149

Consider adding this to your CSS to resolve the problem:

button {
    margin: 0 auto;
    display: block;
}

Upvotes: 75

Rani
Rani

Reputation: 251

Another nice option is to use :

width: 40%;
margin-left: 30%;
margin-right: 30%

Upvotes: 25

ott
ott

Reputation: 149

when all else fails I just

<center> content </center>

I know its not "up to standards" any more, but if it works it works

Upvotes: -3

Espresso
Espresso

Reputation: 4752

The problem is with the following CSS line on .nav_button:

margin: 0 auto;

That would only work if you had one button, that's why they're off-centered when there are more than one nav_button divs.

If you want all your buttons centered nest the nav_buttons in another div:

<div class="nav">
    <div class="centerButtons">
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>
        </div>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>
        </div>
    </div>
</div>

And style it this way:

.nav{
    margin-top:167px;
    width:1024px;
    height:34px;
}

/* Centers the div that nests the nav_buttons */
.centerButtons {
    margin: 0 auto;
    float: left;
} 

.nav_button{
    height:34px;
    margin-right:10px;
    float: left;
}

Upvotes: 11

Related Questions