居中在另一個div的底部的div

我想知道如何放置一個div盒（我想要放置圖像）以便它出現在中心底部的另一個div的頂部。居中在另一個div的底部的div

enter image description here

我想下面的代碼：

<html> 
<body> 
<style type="text/css"> 
.outer { 
    width: 350px; 
    height: 350px; 
} 

.inner { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 
</style> 
<div class="outer"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque, neque ut ultrices posuere, velit arcu aliquam dui, id rutrum justo leo nec purus. Donec aliquet justo a est iaculis id porta nulla pulvinar. Proin quis turpis vitae augue volutpat volutpat. Donec volutpat accumsan urna, id vulputate augue euismod eu. In vitae libero tortor. Integer lacinia, turpis vel egestas ornare, nisi libero tempus orci, non imperdiet erat nulla malesuada lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
    <div class="inner"></div> 
</div> 
</body> 
</html>

來源

2012-06-26 fakeguybrushthreepwood

的絕對定位和經銷商的利潤在內的div將工作的結合。您還需要設置位置相對的外層div

.outer { 
    width: 350px; 
    height: 350px; 
    position: relative; 
    border: 1px solid black; 
} 

.inner { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; /* both left AND right must be set to 0 */ 
    margin: 0 auto; 
}

jsFiddle DEMO

來源

2012-06-26 19:16:09 jackwanders

這真的很容易，如果你有兩個div的確切座標。

在您爲例簡單地把

position: relative; 
top: 250px; 
left: 125px;

或者類似的東西，它會做的伎倆。

來源

2012-06-26 19:09:19

.outer { 
    width: 350px; 
    height: 350px; 
    position:relative; 
    border: 1px #bbb solid; 
} 

.inner { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    position:absolute; 
    left: 130px; 
    bottom:0; 
}

DEMO

來源

2012-06-26 19:13:30 Dev

將它與像素值的位置，但是應當'左：125px'（350-100）/ 2 = 125。然而，有一種方法使其居中爲任意大小的元件 – jackwanders

嘗試類似的東西：jsfiddle

這將有助於把你的div你想要的。

.outer { 
    width: 350px; 
    height: 350px; 
    position: relative; 
    background-color: yellow; 
} 

.inner { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    margin-left: -50px; 
}

爲了清楚起見，我向外部div添加了背景。

來源

2012-06-26 19:17:07 Xella

#outer { 
    width: 350px; 
    height: 350px; 
    position: relative; 
    z-index: 1; 
} 

#inner { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    bottom: 0px; 
    left: 110px; 
    z-index: 2; 
}

來源

2012-06-26 19:32:45 Cleverbot

居中在另一個div的底部的div

回答

相關問題