我如何垂直对齐这些 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>
最佳答案
2018 年 5 月 7 日更新
- 添加了
display: flex
选项
您可以像这样设置按钮和 svg 的样式:
button,
svg {
display: inline-block;
vertical-align: middle;
}
button,
svg {
display: inline-block;
vertical-align: middle;
}
<h2>Using display inline block and vertical align middle</h2>
<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>
希望这对您有所帮助。
显示 Flex
您还可以通过对 browser that is supported 使用 display: flex
来实现此目的.但是需要一个额外的按钮和 svg 包装器。
@supports (display: flex) {
.steps {
display: flex;
flex-direction: row;
align-items: center;
}
}
<h2>Using display flex</h2>
<div class="steps">
<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>
</div>
关于css - 将 SVG 与按钮垂直对齐的最佳方式是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39693705/