这是一张图片，说明我要做什么: 这是我到目前为止所拥有的: ---- HTML --- < ul class ="toolboxItems">< li>< div class ="image">< img src ="someImage.png"></div>< div class ="label"><标签> Lorem ipsum dolor sit amet....</div>< li>< li>/*更多相同.... */</li>< ul> ---- CSS ---- ul.toolboxItems li {margin-bottom:10px;}.image {float:left;宽度:30px;}.label {float:left;宽度:150px;vertical-align:middle;} 我尝试使用display:table/table-cell，但是没有用.解决方案您可以使用CSS表显示属性，这些属性为在所有内容中均受支持(除了IE 7或更低版本).在此处工作的演示: http://jsfiddle.net/Hgssm/1/ .toolboxItems {显示:表；}.toolboxItems li {显示:表行；}.toolboxItems .image，.toolboxItems .label {显示:表格单元格；宽度:30px；垂直对齐:中间；}.toolboxItems .label {宽度:150像素；} I'm trying to align a Text next to an Icon/Image, I want the text or the image to be align vertically but the vertical-align is not being applied, it might have something to do with the floatsHere's an image explainng what I want to do:Here's what I have so far:---- HTML ---<ul class="toolboxItems"> <li> <div class="image"> <img src="someImage.png"> </div> <div class="label"> <label>Lorem ipsum dolor sit amet....</label> </div> <li> <li> /* more of the same .... */ </li><ul>---- CSS ----ul.toolboxItems li {margin-bottom:10px;}.image {float:left; width:30px;}.label {float:left; width:150px; vertical-align:middle;}I tried using display:table / table-cell but it did not work. 解决方案 You could use the CSS table display properties which are supported in everything (besides IE 7 or below).Working demo here: http://jsfiddle.net/Hgssm/1/.toolboxItems { display: table;}.toolboxItems li { display: table-row;}.toolboxItems .image,.toolboxItems .label { display: table-cell; width: 30px; vertical-align: middle;}.toolboxItems .label { width: 150px;} 这篇关于CSS:使用浮动Divs在图标旁边垂直对齐文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
