Proper way to center an absolute button within a relative parent container

Question

I've achieved the result I want. But it's not the correct way to do it. For example if my parent container ever changes widths, this hack won't work. However I did this just to get it on the screen to try and resolve the correct way in the browser.

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>

Sorry about my wacky spacing. For some reason pasting out of Sublime Text 3, everything is all jacked up once it comes here.

Related 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;
 }

Different product title links and short product descriptions, will not always have the same number of characters. If I were to just do a top margin on the .btn element. Not all the buttons would line up in the layout. If I absolute position the button they won't move no matter the length of the copy and title. — Payton Burdette, Feb 15 '17 at 13:37
Then absolutely position a container for the button and then just apply `text-align:center;` to that container. — Donnie D'Amato, Feb 15 '17 at 13:39
Just tried... Show me some code that would work for this situation. I wrapped the .btn in a container all nested within the .product-card container. Gave the .btn container a position: absolute, bottom: 10px and text-align center. Still not center within .product-card. Hopefully I'm missing something easy... — Payton Burdette, Feb 15 '17 at 13:52

score 8 · Answer 1 · edited May 23 '17 at 10:29

8

use this on your .btn instead. This will make your btn center horizontally. css3: translateX to center element horizontally:

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

edited May 23 '17 at 10:29

Community

1
1

answered Feb 14 '17 at 21:29

Robert

131
3

2

I'd rather not use another hack to fix this issue. A CSS transform shouldn't be the way to go for positioning issues. Even though it does achieve the result. Thanks for your input though! – Payton Burdette Feb 14 '17 at 21:35
you can also use left: 50% and margin-left: -100px; to center your .btn – Robert Feb 14 '17 at 21:41

score 2 · Accepted Answer · answered Feb 15 '17 at 13:56

As I said in my comment, make a wrapper for the button and position:absolute; that to the bottom. Then as long as you remove the styles from the button, it'll center itself because the wrapper has text-align:center; on it.

.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>

That worked. That was the exact code I had except for the width: 100% ? How does that effect the center positioning within it's container? — Payton Burdette, Feb 15 '17 at 14:00
It makes the container take up the full width of the card, then anything inside will be the both the center of the container and the card, since they're the same width. Don't forget to mark as the accepted answer! — Donnie D'Amato, Feb 15 '17 at 14:10
this is black magic --- the only thing that worked for me! thanks!!!! — Altons, Nov 19 '19 at 10:14

Proper way to center an absolute button within a relative parent container

2 Answers2