對齊絕對定位div內的元素

我想在html和css的屏幕左側生成一個垂直菜單。在javascript的幫助下，它會在點擊時彈出和彈出。菜單中的每個條目都應該有一個圖標，我試圖放在div的背景中，然後水平居中，因爲假想的垂直軸將通過每個圖標的中心。對齊絕對定位div內的元素

問題是，如果我嘗試使用內聯塊，它們的行爲很奇怪，並且下面的div仍然與前一個底部對齊。有誰知道如何解決這個問題？

這是我的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
     .menu { 
      width: 300px; 
      height: 100%; 
      position: absolute; 
      left: 0px; 
      top: 0px; 
      z-index: 10; 
      background: #abcdef; 
     } 

     .icon-block { 

      width: 50px; 
      height: 50px; 
      display: inline-block; 
      background-color: #fedcba; 
      background-image: url('ico_menu.png'); 
      background-repeat: no-repeat; 

     } 

     .text-block { 

      width: 230px; 
      height: 50px; 
      display: inline-block; 
      background: #acbafe; 
     } 

     .a-block { 
      display: block; 
     } 

     </style> 
    </head> 


    <body> 
     <div class="menu"> 
     <a href="#" class=""> 
      <div class="icon-block"><!-- VOID BLOCK, BACKGROUND IMAGE --></div><div class="text-block"> 
       <span>Home</span> 
      </div> 
     </a> 
     <div class="icon-block"><!-- VOID BLOCK, BACKGROUND IMAGE --></div><div class="text-block"> 
      <a href="#" class="a-block"> 
       About 
      </a> 
     </div> 

     </div> 
    </body> 

</html>

來源

2014-07-25 shadox

顯示你想要什麼 –

使用float:right這一類：

.text-block { 
    float: right;/*Add this*/ 
    width: 230px; 
    height: 50px; 
    display: inline-block; 
    background: #acbafe; 
}

fiddle

來源

2014-07-25 18:25:47

這很有趣。我認爲內聯塊就足夠了，漂浮它有點混亂，但它的工作原理！大！ – shadox

歡迎您:) –

作爲一個瞭解你的需求，我創建fiddle有一些改變HTML結構和評論display: inline-block;。

請檢查它是否解決您的問題，或者如果您可以獲得一個很好的圖像/圖片視圖。

來源

2014-07-25 18:18:01

不，它不是但由於反正圖像草圖。 – shadox

對齊絕對定位div內的元素

回答

相關問題