將文字排列到圖像上方

Question

我想將文字排列到我的div中圖像的頂部。

當前標題：網絡研討會，博客等坐在廣場頂部以下。我在那裏有一種風格：vertical-align：top;但它並不與廣場頂部對齊。

見我的小提琴 - http://jsfiddle.net/huskydawgs/e9pZr/ HTML

<div id="wrapper-resources"> 
     <div id="resources_row"> 
      <div class="resources_cell1"> 
       <div class="resources_lt"> 
        <img height="76" src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png" width="76" /></div> 
       <div class="resources_rt"> 
        <p><strong>Webinar</strong></p> 
       </div> 
      </div> 
      <div class="resources_cell2"> 
       <div class="resources_lt"> 
        <img height="76" src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png" width="76" /></div> 
       <div class="resources_rt"> 
        <p><strong>Article</strong></p> 
       </div> 
      </div> 
      <div class="resources_cell3"> 
       <div class="resources_lt"> 
        <img height="76" src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png" width="76" /></div> 
       <div class="resources_rt"> 
        <p><strong>Blog</strong></p> 
       </div> 
      </div> 
      <div class="resources_cell4"> 
       <div class="resources_lt"> 
        <img height="76" src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png" width="76" /></div> 
       <div class="resources_rt"> 
        <p><strong>Market</strong></p> 
       </div> 
      </div> 
     </div> 
    </div> 

CSS

#wrapper-resources { 
position:relative; 
width:100%; 
border: none; 
margin: 50px 0 0 0; 

}

#resources_row { 
height:100%; 
white-space:nowrap; 
} 

.resources_cell1, .resources_cell2, .resources_cell3, .resources_cell4 { 
height:100%; 
width:25%; 
display:inline-block; 
white-space:normal; 
} 

.resources_lt { 
height:100%; 
width:33%; 
display:inline-block; 
white-space:normal; 
margin-right: 20px; 
vertical-align: top; 
} 

.resources_rt { 
height:100%; 
width:50%; 
display:inline-block; 
white-space:normal; 
vertical-align: top; 
} 

/* Fonts */ 

#wrapper-resources p { 
color: #666666; 
font-family: 'SegoeRegular', Helvetica, Arial, sans-serif; 
font-size: .9em; 
line-height: 1.6em; 

}

Answer 1

需要保證金重置爲0您<p>http://jsfiddle.net/e9pZr/3/

它在默認情況下margin:1em 0;看到http://reference.sitepoint.com/css/collapsingmargins更多的解釋。