相対親コンテナ内に絶対ボタンを中央に配置する適切な方法

Question

私は望む結果を達成しました。しかし、正しい方法ではありません。たとえば、親コンテナの幅が変わった場合、このハックは機能しません。しかし、私はブラウザで正しい方法を試して解決するために画面に表示するだけでした。私の奇抜な間隔については申し訳ありません

See screenshot here

HTML

<div class="container"> 
       <div class="row"> 
        <div class="col-md-4"> 
         <div class="product-wrapper"> 
          <div class="product-card"> 
           <a href="lathes-single.html" class="product-img-wrapper"><img src="../assets/img/46-455.jpg" alt=""></a> 
           <h4> 46-460 12 1/2 in. Variable Speed MIDI-LATHE® </h4> 
           <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> 
           <a href="lathes-single.html" class="btn btn-lg btn-primary">View Product</a> 
          </div> 
         </div> 
        </div> 
       </div> 
</div> 

。何らかの理由でSublime Text 3を貼り付けると、ここに来るとすべてがすべて上に上がります。

関連CSS

.product-img-wrapper { 
    text-align: center; 
} 

.product-img-wrapper img { 
    width: 200px; 
    height: 200px; 
} 

.product-wrapper { 
    position: relative; 
    margin: 50px 0; 
} 

.product-card { 
    position: relative; 
    max-width: 330px; 
    height: 450px; 
    border: 1px solid #eee; 
    margin: 25px auto 0 auto; 
    text-align: center; 
    padding-left: 20px; 
    padding-right: 20px; 
    box-shadow: 7px 7px 5px #838485; 
} 

.product-card .btn { 
    position: absolute; 
    min-width: 200px; 
    bottom: 15px; 
    left: 60px; 
} 

Answer 1

私は一番下にいることを、ボタンやposition:absolute;のラッパーを作り、私のコメントで言ったように。ラッパーにtext-align:center;があるため、ボタンからスタイルを削除している間は、スタイル自体が中心になります。あなたは絶対に配置されるように、これを必要な理由

.product-img-wrapper { 
 
    text-align: center; 
 
} 
 

 
.product-img-wrapper img { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.product-wrapper { 
 
    position: relative; 
 
    margin: 50px 0; 
 
} 
 

 
.product-card { 
 
    position: relative; 
 
    max-width: 330px; 
 
    height: 450px; 
 
    border: 1px solid #eee; 
 
    margin: 25px auto 0 auto; 
 
    text-align: center; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    box-shadow: 7px 7px 5px #838485; 
 
} 
 

 
.product-card .card-bottom { 
 
    position: absolute; 
 
    bottom: 15px; 
 
    width:100%; 
 
    left:0; 
 
}

<div class="container"> 
 
       <div class="row"> 
 
        <div class="col-md-4"> 
 
         <div class="product-wrapper"> 
 
          <div class="product-card"> 
 
           <a href="lathes-single.html" class="product-img-wrapper"><img src="../assets/img/46-455.jpg" alt=""></a> 
 
           <h4> 46-460 12 1/2 in. Variable Speed MIDI-LATHE® </h4> 
 
           <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> 
 
           <div class="card-bottom"><a href="lathes-single.html" class="btn btn-lg btn-primary">View Product</a></div> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
</div>

Answer 2

代わりに.btnでこれを使用しています。これはあなたのbtnを水平にします。 css3: translateX to center element horizontally：

left: 50%; 
-webkit-transform: translateX(-50%); 
-moz-transform: translateX(-50%); 
transform: translateX(-50%);