我有内联SVG对齐的问题。我创建了一个带有一些文本和SVG的按钮。当SVG高度小于文本时,当SVG至少与文本一样大时,对齐正常工作。
我创建了一个带有双色背景按钮的测试用例,以指示中间的确切位置。您可以看到,如果您仔细观察第二种情况并未完全对齐,因为SVG的高度小于文本中的高度。
有没有什么办法解决这一问题?做其他方式(请不要js)?
jsfiddle 1 - 您可以在容器上使用position:relative
,在这些对象上使用position:absolute
:
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
text-align: center;
top: 50%
将物体移动到容器的垂直中心,将物体的顶部作为参考(而不是其中心),因此transform: translateY
将其向上移动50%的距离,使其恰好位于容器的中间(通过对象中心)。
ps:text-align:center;
left:0;
right:0;
和margin:auto
用于水平对齐。
jsfiddle 2 - 或者在display:flex
的容器上使用align-items
来垂直对齐内容,如下所示:
display: -webkit-flex; /* Safari */
display: flex;
-webkit-align-items: center; /* Safari 7.0+ */
align-items: center;
-webkit-justify-content: center;
justify-content: center;
ps:justify content
用于水平对齐。