CSS - Zentrierung horizontal und drücken ein Element mit reinem css

Okay, so habe ich ein Element mit der Klasse .price innerhalb des Elements .item wie gezeigt here. Nun, was ich will, ist .price horizontal zentriert und es wird geschoben/gezogen an den unteren Rand des übergeordneten, like so.CSS - Zentrierung horizontal und drücken ein Element mit reinem css

jetzt hier kommt der spaßige Teil, die diese schwer macht:

reine CSS (kein Javascript/jquery)
es muss dynamisch sein, so dass die width/height Eigenschaft .price schwanken kann (siehe snippet)

hier ist, wie weit ich habe:

.item { 
 
    width: 200px; 
 
    height: 400px; /* not static */ 
 
    background: wheat; 
 
} 
 
.product-image { 
 
    margin: 0 auto; 
 
    width: 180px; 
 
    height: 300px; 
 
    background: lightskyblue; 
 
} 
 
.price { 
 
    margin: 0 auto; 
 
    width: 50px; /* not static */ 
 
    height: 20px; /* not static */ 
 
    background: indianred; 
 
}

<div class="item"> 
 
    <div class="product-image"> 
 
    </div> 
 

 
    <div class="price"> 
 
    </div> 
 
</div>

Vielen Dank im Voraus. Hier

Quelle

2016-09-16 Roderik Rasterhoff

Sie können dies mit flexbox erreichen.

Schritte:

Stellen Sie Ihr .item Element als Flex-Container mit display: flex; und seine Richtung flex-direction: column;
Da Ihre flex-direction auf column eingestellt unter Verwendung ändern, können Sie align-self: center; horizontal verwenden Zentrum Ihrer .price Element (jetzt ein Flex-Element), und schließlich margin-top: auto; verwenden, um es nach unten zu positionieren.

.item { 
 
    width: 200px; 
 
    height: 400px; 
 
    /* not static */ 
 
    background: wheat; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.product-image { 
 
    margin: 0 auto; 
 
    width: 180px; 
 
    height: 300px; 
 
    background: lightskyblue; 
 
} 
 
.price { 
 
    align-self: center; 
 
    margin-top: auto; 
 
    width: 50px; 
 
    /* not static */ 
 
    height: 20px; 
 
    /* not static */ 
 
    background: indianred; 
 
}

<div class="item"> 
 
    <div class="product-image"> 
 
    </div> 
 

 
    <div class="price"> 
 
    </div> 
 
</div>

Quelle

2016-09-16 21:06:53 Ricky

Sie gehen

.item { 
 
    width: 200px; 
 
    height: 400px; 
 
    /* not static */ 
 
    background: wheat; 
 
    position: relative; 
 
} 
 
.product-image { 
 
    margin: 0 auto; 
 
    width: 180px; 
 
    height: 300px; 
 
    background: lightskyblue; 
 
} 
 
.price { 
 
    width: 50px; 
 
    /* not static */ 
 
    height: 20px; 
 
    /* not static */ 
 
    background: indianred; 
 
    position: absolute; 
 
    bottom: 8px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<div class="item"> 
 
    <div class="product-image"> 
 
    </div> 
 

 
    <div class="price"> 
 
    </div> 
 
</div>

Quelle

2016-09-16 18:42:39

Eigentlich dieses Problem beheben, das Element am unteren Ende der Innenseite der Position div Offset nicht. –

Sie sollten relative Positionierung für Ihre Eltern div und absolut in Kind divs verwenden.

My example

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div class="item"> 
    <div class="product-image"> </div> 

    <div class="price"> 
    </div> 
    </div> 
    </body> 

</html> 

.item { 
    width: 500px; 
    height: 400px; /* not static */ 
    background: wheat; 
    position:relative; 
} 
.product-image { 
    margin: 0 auto; 
    width: 200px; 
    height: 300px; 
    background: lightskyblue; 
} 
.price { 
    margin: 0 auto; 
    width: 50px; /* not static */ 
    height: 20px; /* not static */ 
    background: indianred; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
}

Quelle

2016-09-16 19:09:46

Relative Positionierung auf dem übergeordneten Container (item) und absolute Positionierung auf den untergeordneten Container.

.item { 
 
    \t width: 200px; 
 
    \t height: 400px; /* not static */ 
 
    \t background: wheat; 
 
\t position: relative; 
 
} 
 
.product-image { 
 
    \t margin: 0 auto; 
 
    \t width: 90%; 
 
    \t height: 75%; 
 
    \t background: lightskyblue; 
 
} 
 
.price { 
 
    \t margin: auto 39%; 
 
    \t width: 25%; /* not static */ 
 
    \t height: 5%; /* not static */ 
 
    \t background: indianred; 
 
\t position: absolute; 
 
\t bottom: 3%; \t 
 
}

<div class="item"> 
 
    \t <div class="product-image"> 
 
    \t \t </div> 
 
\t \t \t 
 
    \t \t <div class="price"> 
 
    \t </div> 
 
</div>

Oder anstelle der Marge von Einstellung, die Sie nur den linken oder rechten Eigenschaften der Positionierung um es zu bewegen Zentrum nutzen könnten. Wenn Sie möchten, dass der Preis mit dem Boden übereinstimmt, ändern Sie den unteren Prozentsatz auf "0". Die andere Idee, die Ihnen in den Sinn kommt, ist die Erstellung eines anderen div-Containers, nur um den Preis zu bestimmen und ihn am unteren Ende des übergeordneten Containers zu positionieren, indem Sie das price div absolut positionieren und einfach text-align im Parent verwenden. Obwohl ich das bisher noch nicht probiert habe.

Quelle

2016-09-16 19:50:02 Devoneous

CSS - Zentrierung horizontal und drücken ein Element mit reinem css

Antwort

Verwandte Themen