CSS:使用浮动Divs在图标旁边垂直对齐文本 [英] CSS: Vertically Align Text next to Icon using Floating Divs

问题描述

我正在尝试在图标/图像旁边对齐文本，我希望文本或图像在垂直方向上对齐，但是未应用垂直对齐，这可能与浮点数有关

这是一张图片，说明我要做什么:

这是我到目前为止所拥有的:

---- 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表显示属性，这些属性为 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 floats

Here'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在图标旁边垂直对齐文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！