问题:如何让 DIV 中的svg垂直居中?
HTML 代码:
CSS代码:
.content svg { vertical-align: middle;}
实用扩展:如何让 DIV 中的内容垂直居中?
1、首推 Flex 弹性布局
CSS 属性 flex 规定了弹性元素如何伸长或缩短以适应 flex 容器中的可用空间。假设有下面的 HTML 代码:
#content{
display: flex;
justify-content: center;(水平居中)
align-items: center;(垂直居中)
}
2、行高(line-height)法
如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:
p{
height:30px;
line-height:30px;
width:100px;
overflow:hidden;
}
这段代码可以达到让文字在段落中垂直居中的效果。
问题:css如何让< p/> 或其他标签与< svg/>在同一行显示?
用一个具有display: flex;属性的div来包括它们
HTML 代码:
...
CSS代码:
.content { display: flex;}
可以直接在 CSS 中直接使用 SVG:
.box {
background: url('data:image/svg+xml;utf8,');
}
不需要 Base64 转换...当然会有一些浏览器无法理解这种语法。
考虑到浏览器兼容性,用作背景图片时,建议将 SVG 编码为 Base64(或转义特定字符):
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZm9udC1zaXplPSIzMCIgZmlsbD0iI2EyYTliNiIgZmlsbC1vcGFjaXR5PSIwLjMiIGZvbnQtZmFtaWx5PSJzeXN0ZW0tdWksIHNhbnMtc2VyaWYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRyYW5zZm9ybT0ncm90YXRlKC00NSwgMTAwIDEwMCknPuawtOWNsOaWh+WtlzwvdGV4dD48L3N2Zz4=");
问题:svg 图标无法铺满外部盒子的问题
//在svg 源文件的svg 头文件 加入 preserveAspectRatio="none meet"
即可实现svg自适应外部盒子宽高
问题:svg 图标颜色设置不生效
调试中发现元素的颜色始终为黑色,但我已经将其颜色更改为自定义颜色(例如蓝色)。 通过添加 style="fill:#2C30FF",但没效果,不显示我设置的颜色。
解决:“#”是URL中的保留字符,您需要将“#” 替换URL 编码为 %23, 如下:
background: url('data:image/svg+xml;utf-8,');
(通用)好用的SVG收集:
1、
2、