我有一些文本和一个CSS箭头在按钮里面，但是我不能水平对齐它们-箭头在文本下面:
我尝试将vertical-align:middle；添加到.down-arrow中，但它不会水平对齐它们。 我还尝试添加display:flex； Align-items:Center；到按钮，但没有效果。
null
.down-arrow {
transform: rotate(45deg);
border: solid black;
border-width: 0 1px 1px 0;
display: inline-block;
padding: 3px;
margin-left: 7px;
}<button>Text<span class="down-arrow"></span></button>null
jsfiddle:https://jsfiddle.net/1l3odx6s/
以不同方式进行转换，您可以使用vertical-align:midder
null
.down-arrow {
transform: translateY(25%) rotate(-45deg);
transform-origin: top left;
border: solid black;
border-width: 0 0 1px 1px;
display: inline-block;
vertical-align: middle;
padding: 3px;
margin-left: 5px;
margin-right:2px;
}<button>Text<span class="down-arrow"></span></button>
<button style="font-size:30px">Text<span class="down-arrow"></span></button>
<button style="font-size:50px">Text<span class="down-arrow"></span></button>
<button style="font-size:50px">Text<span class="down-arrow" style="padding:5px;border-width: 0 0 2px 2px;"></span></button>
<button style="font-size:50px">Text<span class="down-arrow" style="padding:8px"></span></button>
有多种方法可以轻松实现这一点。
执行此操作的一种方法是使用Vertical-Align
使用垂直对齐
null
.down-arrow {
transform: rotate(45deg);
border: solid black;
border-width: 0 1px 1px 0;
display: inline-block;
padding: 3px;
margin-left: 7px;
vertical-align: 2px;
}<button>Text<span class="down-arrow"></span></button>