Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 将SVG与按钮垂直对齐的最佳方式是什么?_Css_Svg - Fatal编程技术网

Css 将SVG与按钮垂直对齐的最佳方式是什么?

Css 将SVG与按钮垂直对齐的最佳方式是什么?,css,svg,Css,Svg,如何垂直对齐这些SVG图像以垂直匹配我正在制作的按钮 <button style= "width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;"> Step 1<br> .</button> <svg height="50" viewbox="0 0 512 512" width="50" xmlns= "http://www.w3.or

如何垂直对齐这些SVG图像以垂直匹配我正在制作的按钮

<button style=
"width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step 1<br>
.</button> <svg height="50" viewbox="0 0 512 512" width="50" xmlns=
"http://www.w3.org/2000/svg">
<path d=
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
</path></svg> <button style=
"width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step Two<br>
.</button> <svg height="50" viewbox="0 0 512 512" width="50" xmlns=
"http://www.w3.org/2000/svg">
<path d=
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
</path></svg> <button style=
"width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step 3<br>
.</button>

步骤1
. 第二步
. 步骤3
.

于2018年5月7日更新

  • 添加了
    display:flex
    选项


您可以按如下方式设置按钮和svg的样式:

button,
svg {
  display: inline-block;
  vertical-align: middle;
}
按钮,
svg{
显示:内联块;
垂直对齐:中间对齐;
}
使用显示内联块和垂直对齐中间
步骤1
。 第二步
。 步骤3