如何设置图标百分比高度、垂直居中并实现左浮动

问题根源 #

你的代码存在三处属性冲突，直接导致效果不符合预期：

1. flex布局下子元素的float属性完全失效。你给.banner_box设置了display: flex，直接放在容器下的img是flex子元素，设置的float: left根本不生效；嵌套在<a>标签内的img看起来能左浮，是因为<a>才是flex子元素，float仅作用于<a>的内部上下文，和flex容器无关。
2. margin: 0 auto是水平居中属性，和你要的左对齐需求直接冲突，不需要保留。
3. 百分比高度需要逐层继承。如果img嵌套在<a>标签内，你必须先给<a>标签设置高度，img的百分比高度才能正常继承生效。

修正代码 #

CSS

.banner_box {
    width: 640px; 
    height: 150px;
    background-color: #ddd;
    margin: 5px;
    display: flex;
    align-items: center; /* 实现子元素垂直居中 */
    justify-content: flex-start; /* 所有子元素默认左对齐 */
}

/* 处理a标签包裹图标的场景 */
.banner_box a {
    height: 80%; /* 按你的需求调整百分比数值 */
    display: flex;
    align-items: center;
}

.left_center_myicon {
    display: block;
    height: 80%; /* 按你的需求调整百分比数值，宽度会按SVG比例自适应 */
}

HTML

原有HTML代码无需修改即可生效。

额外优化建议 #

你的SVG文件自带固定width和height属性，如果需要让SVG完全适配外层容器的尺寸、缩放时不会出现比例异常，可以把SVG标签内的width和height属性删除，仅保留viewBox属性即可。

内容的提问来源于stack exchange，提问作者Calaf