私はこれを調べ、いくつかの指示に従いましたが、動作していないようです。内部でアンカーリンクを使ってdivを水平に中央に配置する方法は？
コードについては、このリンクをフォロー：
https://jsfiddle.net/3h937r1q/7/
を私は、親のdivのmargin: 0 auto;（center-blockクラス）とfloat: none;を試みたが、私はそれを動作させるように見えることはできません。誰も私がページの真ん中でdivを中心にして、それがなぜ機能していないのかを教えてもらえますか？
期待される成果：https://jsfiddle.net/3h937r1q/22/
私はあなたがCOL-オフセットを使用することができます真ん中
にして、それを移動するためにmargin-leftを使用したくない場合を除き：
<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>
@Thanks、私は知っていますが、私は欲しいですそれをページの中央に配置します。オフセットを使用しても、そのページの中心にはありません。それはちょうど中間 –
の近くに移動しますが、右の方法でオフセットを与える場合...それはすでに中心に揃えられるでしょう... –
画面は12列に分割されています...だからあなたは4と4の長さ....残っている長さは4なので、中心に揃えるために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;
}
私はあなたがこれを探していると思います。 タグ内にブートストラップグリッドを使用しているので、ブートストラップオフセットクラスを使用してエレメントを中央に配置する必要があります。
<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>
https://jsfiddle.net/25Lno6n7/
.home-buttons {
width:600px;
display:flex;
flex-direction:column;
align-items:center;
}
.home-buttons .HomepageBtn {
flex:0 0 300px;
}
あなたがこれまでにしようとしているコードの一部を提供していただけますか？ – AlbanianGamerYT
@AlbanianGamerYT jsfiddleに従うとコード –
が表示されます。 – adamk22