導航欄上的下拉按鈕上的向下箭頭

Question

在我的導航欄上，我有一個下拉菜單，我想在此按鈕中插入向下箭頭，但是我應該怎么做？ 我可以使用&#9660字符，但是如果我想使用不同的箭頭怎么辦？ 這是我的代碼中插入img在a https://jsfiddle.net/adriansikora344/cgfd5cxk/我使用position absolute進行img當我改變文本字體大小我有一定的位置becouse，但top: 50% - 16px是正確的？ Meybe我應該將此標簽用於span嗎？

Answer 1

我會使用background-image

 body { padding: 20px 20px; } a { position: relative; display: inline-block; background: url('https://img.clipartfest.com/c37b8d1f47f75c7cf1f8f37ede371252_red-down-arrow-clip-art-at-down-arrow-clipart_600-600.png') calc(100% - 10px) center no-repeat / 16px 16px; padding: 10px 30px 10px 10px; border: 1px solid black; } 

 <a>text</a> 

Answer 2

或者，您仍然可以使用絕對位置的img標簽，但將top更改為top: 50%; 並添加transform: translateY(-50%); 示例： https ： //jsfiddle.net/cgfd5cxk/3/

您可以在此處閱讀有關居中元素的更多信息： https : //css-tricks.com/centering-css-complete-guide/

Answer 3

這是您想要的布局嗎？

它使用圖標代替圖像，但是您可以將i標簽替換為img標簽並調整css。

 body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .link { display: inline-flex; justify-content: center; align-items: center; padding: 10px; text-decoration: none; color: black; background-color: gray; border-radius: 5px; } .link span { margin-right: 8px; } .link i { } 

 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <a class="link" href="https://jsfiddle.net/Hastig/cgfd5cxk/5/"> <span>text</span> <i class="fa fa-caret-square-o-down"></i> </a> 

小提琴

https://jsfiddle.net/Hastig/cgfd5cxk/5/

字體很棒

另外， 這是當前Font Awesome圖標的列表 ，這是在HTML中加載字體的鏈接。

https//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css