將元素置於絕對定位的元素中

我有一件非常簡單的事情我想要做。我仍在研究CSS的所有細節，請耐心等待。我想基本上拿一個div，把它放在position: absolute; left: 10px; right: 10px; bottom: 10px，然後把它的孩子，並在瀏覽器中水平居中。 This is my attempt at doing so：將元素置於絕對定位的元素中

HTML：

<div class="notificashun-holder"> 
    <div class="alert-message info notificashun"> 
     <p>Hello, World!</p> 
    </div> 
</div>

CSS：

.notificashun-holder { 
    display: block; 
    bottom: 10px; 
    left: 10px; 
    right: 10px; 
    position: absolute; 
} 

.notificashun { 
    display: inline-block; 
    margin: 0 auto; 
}

的事情是，我使用的引導和alert-message類使項目display: block，所以我要「縮水」下來到正常大小（僅適合其內容的大小）。

任何人都可以幫助我做到這一點？我只需要使notificashun-holder從瀏覽器的左側，右側和底部開始變爲十個像素，並且notificashun只與它需要的一樣大，並且集中在notificashun-holder之內。

來源

2011-11-18 Naftuli Kay

由於您使用的inline-block元素爲.notificashun，它可以通過text-align屬性影響，所以使它的中心，只是text-align: center;屬性適用於您的.notificashun-holder：

.notificashun-holder { 
    display: block; 
    bottom: 10px; 
    left: 10px; 
    right: 10px; 
    position: absolute; 

    /*New property:*/ 
    text-align: center; 
}

來源

2011-11-18 03:09:52 Nightfirecat

不錯，可以解決它！有沒有更好的方式來完成我想完成的任務？ –

據我所知，這是關於我能看到的最好的方法，如果你特別需要這個元素作爲「內聯塊」，因爲它可以方便地保持它的最小尺寸。你完成這一切的方式沒有錯。 – Nightfirecat

很酷，謝謝。是的，我不能將它內聯，它會使Bootstrap的CSS混亂。謝謝！ –

將元素置於絕對定位的元素中

回答

相關問題