CSS - 图像和文本的对齐问题

下面是一个屏幕截图，指出了我打算将图像和文本放在列表上方的方式。CSS - 图像和文本的对齐问题

下面是我在我的错位问题方面的截图。

下面是形象， “名字姓” 文本的HTML和它下面的列表：

<section class="vertical_menu_bar_section"> 
    <div id="img_logged_in_user"> 
      <img src="http://static3.depositphotos.com/1005574/205/v/950/depositphotos_2053115-Smile-button.jpg" 
       height="128" width="128" align="left" /><p>FIRSTNAME SURNAME</p> 
    </div>   

    <div id='vertical_menu'> 
     <ul> 
      <li><a href='#'><span>CALENDAR</span></a></li> 
      <li><a href='#'><span>TOTALS</span></a></li> 
      <li><a href='#'><span>OPTION 3</span></a></li> 
      <li><a href='#'><span>OPTION 4</span></a></li> 
     </ul> 
    </div> 
<section>

下面是我的CSS：

/* Section - Vertical menu bar */ 
.vertical_menu_bar_section { 
    color: #FFFFFF; 
    background: #FF0000; 
    font-family:'Trebuchet MS', Tahoma, Sans-serif; 
    clear: both; 
    margin: 0; 
    height: 100%;  
} 

#vertical_menu { 
    background: #FF00CC; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 200px; 
    font-size: 20px; 
    font-family:'Trebuchet MS', Tahoma, Sans-serif; 
    clear: both; 
} 

#vertical_menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#vertical_menu li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#vertical_menu a { 
    background: #333; 
    border-bottom: 1px solid #393939; 
    color: #FFFFFF; 
    display: block; 
    margin: 0; 
    padding: 8px 12px; 
    text-decoration: none; 
    font-weight: normal; 
} 

#vertical_menu a:hover { 
    background: #2580a2 url("/public/images/hover.gif") left center no-repeat; 
    color: #fff; 
    padding-bottom: 8px; 
} 

/* */ 
#img_logged_in_user { 
    clear: both; 
    display: block; 
    float: left; 
    background: #2580a2; 
}

任何想法至于我哪里去错了。

谢谢。

来源

2015-03-13 ANM

请检查，如果这是你所需要的 Fiddle

对于双方的div .img_logged_in_user和.vertical_menu我已经介绍了命名为.basic_div在Basic_div宽度将影响到双方，将是一个共同的事业部对齐

还添加了一个<span>所以用户名不会低于图片。

来源

2015-03-13 15:18:37

为了保持图像和名称一致，你应该设置缠绕元件的width财产（这是#img_logged_in_user）：

#img_logged_in_user { 
    width: 250px; 
}

然后设置图像margin添加它们之间的间距：

#img_logged_in_user > img { 
    margin-right: 20px; 
}

在此处查看实时示例：http://jsfiddle.net/cdog/sbu24c45/。

来源

2015-03-13 15:31:41 cdog

CSS - 图像和文本的对齐问题

回答

相关问题