CSS - 水平居中並用純css向下推一個元素

好的，所以我有一個元素在元素.item內，如here所示。現在我想要的是.price水平居中，並被推/拉到其父母的底部邊界like so。CSS - 水平居中並用純css向下推一個元素

現在，這裏是有趣的部分，這使得這款硬盤：

純CSS（不使用Javascript/jQuery的）
它需要是動態的，所以.price的width/height屬性可以波動（見片段）

這是我在多大程度上得到：

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

在此先感謝。

來源

2016-09-16 Roderik Rasterhoff

您可以flexbox實現這一目標。

步驟：

與display: flex;設置你的.item元素作爲柔性容器和使用flex-direction: column;
由於您的flex-direction設置爲column改變其方向，您可以使用align-self: center;水平居中您.price元素（現在是flex-item），最後使用margin-top: auto;將它放置在底部。

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

來源

2016-09-16 21:06:53 Ricky

在這裏你去

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

來源

2016-09-16 18:42:39

其實這個修復元素在該項目DIV中不能抵消底部。 –

你應該使用相對定位對你的父母股利和兒童的div絕對的。

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

來源

2016-09-16 19:09:46

父容器（項目）和絕對定位的子容器上的相對定位。

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

，而不是設置保證金，你可以只使用定位的左邊或右邊的屬性將它移到中心或。如果您希望價格與底部齊平，只需將底部百分比更改爲「0」。

想到的是創建只是價格的另一個DIV容器和相對你的父容器的底部，它定位的其他的想法，絕對定位的價格股利和父比單純使用文本對齊。雖然我還沒有嘗試過。

來源

2016-09-16 19:50:02 Devoneous

CSS - 水平居中並用純css向下推一個元素

回答

相關問題