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 - 圖像和文本的對齊問題

回答

相關問題