按钮不居中[重复]答案

【问题标题】：Button not centering [duplicate]按钮不居中[重复]
【发布时间】：2021-05-11 09:13:58
【问题描述】：

我有一个按钮，我尝试将其居中，但它不起作用。我尝试将边距更改为 50%，但它并不完全位于中心。我尝试在下面的代码中执行操作，也不希望总是向左移动

.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>
  );
};

如何才能居中？

【问题讨论】：

"Uncaught SyntaxError: Unexpected token '<'",
另外，use flexbox。它存在的全部原因是使布局更容易，包括居中。
您是否试图将所有内容集中在 .result div 中？包括按钮下方的卡片？
也许做一个可运行的例子meta.stackoverflow.com/a/338538/125981

标签： javascript html css reactjs

【解决方案1】：

如果你不想玩位置和弹性框，只是一个简单的修复，只需添加

边距：0 自动；显示：块；

.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>

【讨论】：

【解决方案2】：

删除margin-right: -50%; 并且我在您的示例中看到该类没有属性：position: absolute; 请添加它，结果将如您所愿。

.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;
}

【讨论】：

【解决方案3】：

或者你可以把你的按钮放在它自己的 div 旁边：

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

然后将其附加到您的 CSS 文件中：

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

【讨论】：

【解决方案4】：

删除margin-right: -50%;

结合您的 left 和 transform 设置，这是多余的，可能会导致您所要求的偏移。

【讨论】：