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

<强> Online Example

图标与文本垂直对齐

1 个答案: