如何將這些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>