CSS Wrapper 不会与其内容对齐答案

【问题标题】：CSS Wrapper Won't Align with its ContentCSS Wrapper 不会与其内容对齐
【发布时间】：2020-07-25 14:55:56
【问题描述】：

我试图用 margin 0 auto; 使我的按钮居中，但它似乎更向右移动Reference Image 1 用我的 jumbotron 线，当我检查时，我看到我的 按钮包装器没有与我的按钮内联 Reference Image 2

但是当我在这里运行我的代码时，它似乎工作正常：

.view-products {
  font-family: Bebas Neue;
  font-size: 20px;
  color: #fff;
  padding: 5px 15px;
  height: 160px;
  width: 115px;
  border-radius: 60% 60% 60% 60% / 75% 75% 45% 45%;
  background-color: Transparent;
  background-repeat: no-repeat;
  border: 5px solid #fff;
  transition: 0.8s;
}

.view-products a {
  text-decoration: none;
  color: #fff;
}

.view-products:hover {
  background-color: #eb974e;
  color: #ffcb05;
}

.view-products a {
  color: #eb974e;
}

.button-wrapper {
  margin: 0 auto;
  padding: 0;
  width: 115px;
}

<div class="row button-wrapper">
  <div class="col-12">
    <a href="products.html">
      <button type="button" class="view-products btn btn-primary">VIEW<br>PRODUCTS</button>
    </a>
  </div>
</div>

我应该如何处理我的按钮以使其与其包装对齐？

我已经尝试删除其他对象并得到相同的结果，当我滚动 Reference Image 3 时，一定有什么东西在按下我的按钮，因为它不是徽标或 导航栏

我是网络开发新手，这是我的第一个投资组合项目，我非常感谢任何可以帮助我解决这个问题的人，因为我已经尝试了很多方法，但没有发现任何区别。

【问题讨论】：

为什么button在锚标签a中？那没有意义。如果您想将用户带到products.html，那么锚标签就足够了。你不需要按钮。事实上，按钮在这个标记中没有任何作用。
@CodeLover 感谢您的建议！不知道锚标签已经够用了，再次感谢！
不客气，此外，您的 CSS 定位到错误的锚点。您已将.view-products 应用于按钮并定位不存在的子锚标记。对于您的问题，我的理解是，您想要一个看起来像鸡蛋的可点击元素，并且文本应该在中心对齐。垂直和水平。这就是你要找的吗？
@CodeLover 是的，我试图将实际按钮而不是文本居中，但它的包装似乎与图像参考 2 中的按钮不对齐

标签： css design-patterns layout alignment css-position

【解决方案1】：

我还不确定你到底在看什么，但我已经尝试根据我的理解来制作。

对于btn-primary 类，我相信您正在使用引导程序。

首先，您需要修复锚点和按钮标记。请参考以下可能对您有所帮助的 sn-p。

注意：如果您不需要.row 容器边距，请移除my-2。

.view-products {
    width: 150px;
    height: 208px;
    display: block;
    background-image: url("https://i.imgur.com/PspKZF4.png");
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row my-2">
    <div class="col-12 d-flex justify-content-center">
        <div class="view-products d-flex justify-content-center align-items-center">
            <a href="#" class="text-center">VIEW<br />PRODUCTS</a>
        </div>
    </div>
</div>

【讨论】：

我想我已修复它，但我将 col-12 更改为 col-13 但引导程序不只包含 12 个 cols？（请参阅我自己的答案中的图片）
谢谢！！你解决了我的问题实际上是 justify-content-center 解决了它不介意我之前评论的内容你的代码实际上帮助我将我的内容居中我只是不知道引导程序中有像 d-flex 这样的东西再次感谢帮助像我这样的初学者！
很高兴为您提供帮助。你可以在这里getbootstrap.com/docs/4.4/utilities/flex 了解更多关于 bootstrap flex 的信息，完整的指南在这里getbootstrap.com/docs/4.4/getting-started/introduction 祝你好运
非常感谢！我认为margin 0 auto的原因；根据我搜索的内容没有工作，是因为像这样的标签是内联元素，无论如何谢谢你第一次来这里帮助我！

【解决方案2】：

尝试添加“margin: 0 auto; padding: 0;”到“.view-product”。你也可以试试'float:right;'在“.view-product”中

【讨论】：

谢谢您的回答！，我真的很感激！但我已经尝试过，我只想知道如何将我的按钮与它的包装对齐，因为在参考图像 2 中它未对齐。这是我第一次在这里堆栈溢出再次感谢！
别担心，我也是新来的。希望@Codelover 的回答能解决您的问题。美好的一天！

【解决方案3】：

@codelover 我想我修复了它，但我将 col-12 更改为 col-13 但引导程序不只包含 12 个 cols？ Reference Image

<div class="row button-wrapper">
  <div class="col-13">
    <button type="button" onclick="window.location.href='products.html'" class="view-products btn btn-primary">VIEW<br>PRODUCTS</button>
  </div>
</div>

【讨论】：