CSS 包装器不会与其内容对齐

Question

I was trying to center my button with margin 0 auto; but it appears to move more towards the right Reference Image 1 along with my jumbotron line and as I inspect i saw that my button wrapper was not inline with my button 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>

What should I do to my button so that it would align to its wrapper?

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

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

Answer 1

尝试将 "margin: 0 auto; padding: 0;" 添加到“.view-product”。您也可以在 '.view-product'

中尝试 'float:right;'

Answer 2

我还不确定你到底在看什么，但我已经试着根据我的理解做了。

使用 btn-primary class 我相信您正在使用 bootstrap。

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

Note: If you don't need .row container margin than remove 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>

Answer 3

@codelover 我想我修复了它，但我将 col-12 更改为 col-13 但 bootstrap 不只包含 12 列吗？ 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>

CSS 包装器不会与其内容对齐

CSS Wrapper Won't Align with its Content

css

layout

design-patterns

css-position

alignment