在絕對定位的div內對齊元素

Question

我想在html和css的屏幕左側建立一個垂直菜單。 借助javascript，它會在點擊時彈出和彈出。 菜單中的每個條目都應該有一個我試圖放在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>

Answer 1

使用float:right這個類：

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

小提琴

Answer 2

作為一個理解你的要求，我創建了對html結構和注釋display: inline-block;一些更改小提琴 display: inline-block; 。

請檢查它是否能解決您的問題，或者您是否可以獲得非常棒的圖像/圖片視圖。

在絕對定位的div內對齊元素

問題描述

2 個解決方案

解決方案1
2 已采納 2014-07-25 18:25:47

解決方案2
0 2014-07-25 18:18:01

在絕對定位的div內對齊元素

問題描述

2 個解決方案

解決方案1 2 已采納 2014-07-25 18:25:47

解決方案2 0 2014-07-25 18:18:01

解決方案1
2 已采納 2014-07-25 18:25:47

解決方案2
0 2014-07-25 18:18:01