Button not centering

Question

I have a button that I try to center but it doesn't work. I tried changing the margin to 50% but it's not exactly in the center. I tried to do what in my code below also don't want always steek t the left

.openAllButton {
  background-color: #4caf50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  border-radius: 10px;
}

const ResultGrid = ({ resultGrid = [] }) => {
  const openInNewTab = (url) => {
    console.log("inFunction");
    var win = window.open(url, "_blank");
  };
  const handleOpenAll = () => {
    resultGrid.forEach((result) => {
      openInNewTab(result);
    });
  };
  return (
    <div className='result'>
      <button className='openAllButton' onClick={handleOpenAll}>
        Open All
      </button>
      <Card>
        <table>
          <tr>
            <th>links</th>
          </tr>
          {resultGrid.map((result) => (
            // <div className='result'>
            <tr>
              <td>
                <a href={result} target='_blank'>
                  {result}
                </a>
              </td>
            </tr>
          ))}
        </table>
      </Card>
    </div>
  );
};

How can I center it?

Also, [use flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). The whole reason it exists is to make layout easier including centering things. — Mike 'Pomax' Kamermans, Feb 07 '21 at 16:29
Are you trying to center everything inside the .result div? including the card below the button? — codemonkey, Feb 07 '21 at 16:31
Perhaps make a runnable example https://meta.stackoverflow.com/a/338538/125981 — Mark Schultheiss, Feb 07 '21 at 17:05

score 0 · Answer 1 · answered Feb 07 '21 at 16:31

0

Delete margin-right: -50%;

In combination with your left and transform settings it's superfluous and might cause the offset you desribe.

answered Feb 07 '21 at 16:31

Johannes

53,485
15
52
104

gionic · Answer 2 · 2021-02-07T16:38:22.307

Delete margin-right: -50%; And I see in your example that the class does not have the attribute: position: absolute; Please add it and the result will be as you want.

.openAllButton {
  position: absolute;
  background-color: #4caf50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  left: 50%;
  transform: translateX(-50%, -50%);
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  border-radius: 10px;
}

score 0 · Answer 3 · answered Feb 07 '21 at 16:35

Or you could put your button iside its own div:

<div class="btn">
      <button className='openAllButton' >
        Open All
      </button>
</div>

and then append this to your CSS file:

.btn{
  display: flex;
  align-items: center;
  justify-content: center;
}

score 0 · Answer 4 · answered Feb 07 '21 at 16:42

Just a simple fix if you don't want to play with position and flexbox, just add

margin: 0 auto; display: block;

.openAllButton {
  background-color: #4caf50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  border-radius: 10px;
  display:block;
  margin: 0 auto;
}

<button class='openAllButton' onClick={handleOpenAll}>
        Open All
      </button>

Button not centering

4 Answers4