如何在内部具有锚链接的div水平居中？

Question

我研究了此问题，并遵循了一些说明，但它们似乎没有用。

请点击以下链接获取代码：

https://jsfiddle.net/3h937r1q/7/

我已经尝试过margin: 0 auto; （ center-block类）和float: none; 在父div上，但我似乎无法正常工作。 谁能帮助我在页面中间将div居中，并告诉我为什么它不起作用？

预期结果： https : //jsfiddle.net/3h937r1q/22/

除非我不想使用margin-left将其移到中间

Answer 1

您可以使用col-offset：

        <div class="col-xs-12 col-md-12 home-buttons center-block" >
        <a href="#" class="col-xs-6 col-sm-4 col-md-2 HomepageBtn Animate col-sm-offset-2 col-md-offset-4" >
            <div class="tile-text">
                AP REVIEW
            </div>
        </a>
        <a href="#" class="col-xs-6 col-sm-4 col-md-2 HomepageBtn Animate">
            <div class="tile-text">
                VAT CHECKER
            </div>
        </a>
    </div>

Answer 2

我删除了height并指定了padding: 40px 0px anchor标记

更新了演示

.home-buttons .HomepageBtn {
  background-color: #4F7F64;
  /*height: 140px;*/
  padding: 40px 0px;
  color: white;
  font-size: small;
  font-family: "futura-pt-n7", 'futura-pt', Helvetica, Arial, sans-serif;
  font-weight: bold;
  border-style: solid;
  text-align: center;
}

Answer 3

我想您正在寻找这个。 当你在一个标签内使用引导电网，你必须使用引导胶印级居中的元素。

<div class="col-xs-12 col-md-12 home-buttons">
    <a href="#" class="col-xs-6 col-sm-4 col-md-2 col-md-offset-4 col-sm-offset-2 HomepageBtn Animate">
        <div class="tile-text">
        AP REVIEW
        </div>
    </a>
    <a href="#" class="col-xs-6 col-sm-4 col-md-2 HomepageBtn Animate">
        <div class="tile-text">
        VAT CHECKER
        </div>
    </a>
</div>

Answer 4

https://jsfiddle.net/25Lno6n7/

.home-buttons {
  width:600px;
  display:flex;
  flex-direction:column;
  align-items:center;
   }

   .home-buttons .HomepageBtn {
     flex:0 0 300px;
   }