带有垂直对齐文本的图标答案

【问题标题】：icon with text vertically aligned带有垂直对齐文本的图标
【发布时间】：2015-04-06 20:54:29
【问题描述】：

我正在尝试做一个响应式图像图标和垂直对齐的所属文本。但是一旦我想设置任何大小的文本大小，图标也会调整大小。以及如果我写更长的文本，图标也会调整大小。我是这样做的，但我相信一定有一些简单的方法。我只想要一个可以设置百分比宽度的图标图像和可以设置字体大小的文本（标签）。

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>

【问题讨论】：

你必须明白，使用百分比宽度，它是父元素的相对宽度。这意味着如果您的文本较长，因此父元素较长，因此您的 30% 将增加。也许你可以简单地设置max-width: 20px;
正如凯所说。让您的图标宽度独立运行，并让其父级对比度调整以适应响应行为的变化，而无需 %.这是因为向父级添加 % 会以您可能不希望的方式影响子图像，除非您在父级中拥有的只是一张图像（您没有）。

标签： css

【解决方案1】：

你需要将.filter_item_icon_box的宽度换成px，而不是percentage

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

Online Example

【讨论】：

谢谢大家的解释，我已经将图标框的宽度设置为固定像素50px，效果很好，谢谢。
不客气@LukášJežek。通过将答案设置为正确或投票赞成，没有更好的方式在 stackoverflow 上表示感谢 =)