2

アイコン/画像の横にテキストを配置しようとしています。テキストまたは画像を垂直方向に配置したいのですが、垂直方向の配置が適用されていません。フロートと関係がある可能性があります。

これが私がやりたいことを説明する画像です： ここに画像の説明を入力してください

これが私がこれまでに持っているものです：

---- 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;}

display：table / table-cellを使用してみましたが、機能しませんでした。

4

1 に答える 1

5

すべてでサポートされているCSSテーブル表示プロパティを使用できます（IE 7以下を除く）。

ここでの作業デモ：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;
}
于 2012-10-22T20:25:03.080 に答える