文本垂直对齐的图标

Question

我试图做一个响应的图像图标，并垂直对齐属于文本。 但是，一旦我要设置任意大小的文本大小，图标的大小也会随之调整。 就像我写了更长的文字一样，该图标也将调整大小。 我是这样做的，但是我相信必须有一些简单的方法。 我只想要一个图标图像，可以在其中设置百分比宽度，在文本（标签）中可以设置字体大小。

jsfiddle： https ://jsfiddle.net/ra7zbwwe/

css：#cat_filter_box {宽度：100％; 保证金：0自动; }

.filter_item {
   float:left;
}

.filter_item_icon_box {
    display: inline-block;
    width:30%;
}


.filter_item:after {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.filter_item_text {
    display: inline-block;
    font-size:1em;
}

HTML：

     <div id="cat_filter_box">
     <div class="filter_item"><a href="#">
         <span class="filter_item_icon_box"><img src="http://czechtop.cz/images/osobnosti.png" width="100%" style="vertical-align:middle" /></span>
         <span class="filter_item_text">Textlength</span></a>
     </div>

     <div class="filter_item"><a href="#">
         <span class="filter_item_icon_box"><img src="http://czechtop.cz/images/osobnosti.png" width="100%" style="vertical-align:middle" /></span>
         <span class="filter_item_text">Textlength of item two</span></a>
     </div>
</div>

Answer 1

您需要将.filter_item_icon_box的宽度交换为px ，而不是百分比

.filter_item_icon_box {
    display: inline-block;
    width:50px;
}

在线示例