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

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

html css

Html 在绝对定位的div内对齐元素,html,css,Html,Css,我想用html和css在屏幕左侧构建一个垂直菜单。在javascript的帮助下，它将在单击时弹出。菜单中的每个条目都应该有一个图标，我试着把它放在div的背景中，然后水平居中，因为一个假想的垂直轴将穿过每个图标的中心问题是，如果我尝试使用内联块，它们的行为会很奇怪，并且后面的div与前面的div的底部保持一致。有人知道如何解决这个问题吗这是我的代码： <!DOCTYPE html> <html> <head> <style typ

我想用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>


.菜单{
宽度：300px；
身高：100%；
位置：绝对位置；
左：0px；
顶部：0px；
z指数：10；
背景：abcdef；
}
.图标块{
宽度：50px；
高度：50px；
显示：内联块；
背景色：#fedcba；
背景图片：url（'ico_menu.png'）；
背景重复：无重复；
}
.文本块{
宽度：230px；
高度：50px；
显示：内联块；
背景：#acbafe；
}
a区{
显示：块；
}

为了理解您的需求，我对html结构做了一些修改，并注释了

显示：内联块
请检查它是否解决了您的问题，或者您是否可以获得一个很棒的图像/图片视图。
使用float:right
此类：
.text-block {
    float: right;/*Add this*/
    width: 230px;
    height: 50px;
    display: inline-block;
    background: #acbafe;
}

展示你想要的有趣的图像草图。我认为内联块已经足够了，它有点凌乱，但它可以工作！伟大的