Richtige Weg, um center-ein absolutes Taste innerhalb einer relativ übergeordneten container

Habe ich erreicht, das Ergebnis will ich nicht. Aber es ist nicht der richtige Weg, es zu tun. Zum Beispiel, wenn mein übergeordneten container jemals ändert breiten, dieser hack wird nicht funktionieren. Aber ich Tat dies nur, um es auf dem Bildschirm, um zu versuchen und zu lösen, den richtigen Weg in den browser.

Siehe screenshot hier

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 über meine verrückte Abstand. Aus irgendeinem Grund einfügen von Sublime Text 3, alles aufgebockt einmal geht es hier.

Zugehörigen 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;
 }
Warum brauchen Sie diese absolut positioniert?
Verschiedene Produkt-Titel links und kurze Produkt-Beschreibungen, wird nicht immer die gleiche Anzahl von Zeichen. Wenn ich nur einen oberen Rand auf der .btn-element. Nicht alle Tasten, die Linie würde bis in das layout. Wenn ich die absolute position der Schaltfläche, die Sie nicht bewegen, egal wie lange das kopieren und Titel.
Dann absolut positionieren Sie einen container für die Schaltfläche und dann nur für text-align:center; in diesem container.
Gerade versucht... Zeigen Sie mir einige code, der funktionieren würde für diese situation. Ich wickelte .btn in einem container alle geschachtelten innerhalb der .product-card-container. Gab die .btn-container ein position: absolute, bottom: 10px und text-align-center. Noch nicht Mittelpunkt innerhalb .Produkt-Karte. Hoffentlich bin ich etwas fehlt einfach...

InformationsquelleAutor Payton Burdette | 2017-02-14

  1. 1

    verwenden Sie diese auf Ihrem .btn statt. Dadurch wird Ihr btn-center-horizontal.
    css3: translateX-center-element horizontal: 

    left: 50%;
 -webkit-transform: translateX(-50%);
 -moz-transform: translateX(-50%);
 transform: translateX(-50%);
    Würde ich eher nicht verwenden Sie einen anderen hack, um dieses Problem zu beheben. Ein CSS-transform sollte nicht der Weg zu gehen für die Positionierung von Themen. Auch wenn es nicht das Ergebnis erreichen. Vielen Dank für deinen input aber!
    Sie können auch Links: 50% und margin-left: -100px; auf der Mitte Ihr .btn

    InformationsquelleAutor Robert

Schreibe einen Kommentar