如何将这些CSS三角形与文本垂直对齐？

Question

 div { margin: 10px; } .arrow-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; vertical-align: top; } .arrow-down { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid red; vertical-align: bottom; } 

 <div> <span class="arrow-up"></span> An up arrow </div> <div> <span class="arrow-down"></span> A down arrow </div> 

https://jsfiddle.net/dL1od5tz/8/

我想对齐它们，以使箭头的底部与文本的底部对齐。 垂直对齐似乎没有任何作用，设置边距和填充也无济于事。 我没主意。 谢谢！

Answer 1

使它们成为每个inline-block怎么样？

 div { margin: 10px; } .arrow { display: inline-block; } .up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; } .down { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid red; vertical-align: bottom; } 

 <div> <span class="arrow up"></span> <span>An up arrow</span> </div> <div> <span class="arrow down"></span> <span>A down arrow</span> </div>