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;
}

fiddle

Answer 2

根据您的要求，我创建了fiddle，对html结构进行了一些更改并注释了display: inline-block;。

请检查它是否能解决您的问题，或者您是否可以获得非常棒的图像/图片视图。

在绝对定位的div内对齐元素

2 个答案: