以相对父容器内的绝对按钮为中心的正确方法

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> 

对不起我的古怪的间距。出于某种原因粘贴了崇高文字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%);