我的圖像底部如何定位在已定位絕對的div內？

這裏是我的html代碼：我的圖像底部如何定位在已定位絕對的div內？

<div class="icon" style="height: 85px; position: relative;"> 
<img src="images/image.png"> 
</div>

CSS：

.sol-add-section { 
      width: 160px; 
      float: left; 
      margin: 20px 50px 0px 0px; 
    } 

    .image { max-width: 160px; 
       max-height:85px; 
       position: absolute; 
       bottom:5px; 
       margin-left:10px; 
    } 

    .icon { 

    .sol-add-section image { 

    display: block; 
    }

正如你所看到的股利是位置：相對的，形象是position: absolute。

我可以在不添加margin-right等情況下使圖像居中，即margin-right: auto; margin-left: auto（我已經嘗試過）。

來源

2013-12-20 user3124280

可能重複的[如何居中一個圖像粘貼到不同大小的div底部？]（http://stackoverflow.com/question s/20643976/how-do-i-center-an-image-that-sticks-of-the-the-the-of-a-varying-size-div） –

這種定位是否必要？（相對/絕對）如果是這樣，從div的寬度減去圖像的寬度然後將該值分配給您的圖像（左或右屬性） –

在你的CSS的附加價值

.icon .img { 
position :relative; 
left:(your value); 
right:(your value); 
top:(your value); 
bottom:(your value); 

}

來源

2013-12-21 01:52:11 Ikhbal

可以使用文本對齊：中心;用：

一個）絕對：positionning和負餘量等於圖像的半寬度：）中的流動，線高和垂直對齊

<div class="icon" style="height: 85px; position: relative;text-align:center;background:gray"> 
    <img src="http://lorempixel.com/100/80/people/1" style="position:absolute;bottom:0;margin-left:-50px; "> 
</div>

B：

<div class="icon" style="height: 85px; line-height:85px;text-align:center;background:gray"> 
    <img src="http://lorempixel.com/100/50/people/1" style="vertical-align:bottom; "> 
</div>

看代碼在這裏的行動：http://codepen.io/anon/pen/dbmFv

來源

2013-12-21 02:01:39

b去我的選擇，你也有選擇使用背景 - 圖像，如果圖像僅用於裝飾目的。 –

我的圖像底部如何定位在已定位絕對的div內？

回答

相關問題