Question

我已经达到了我想要的结果。但这不是正确的做法。例如，如果我的父容器改变宽度，这个hack将无法工作。但是我这样做只是为了让它在屏幕上尝试解决浏览器中的正确方法。

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

在你的.btn上使用它。这将使你的btn水平居中。 css3: translateX to center element horizontally：

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

Answer 2

正如我在评论中所说的那样，为按钮创建一个包装器，并在底部创建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>

在相对父容器

2 个答案: