HTML - 一個img定位權相對DIV

我有一箇中心DIV和一個簡單的問題... 我不知道如何將圖像相對放置有權這樣說： HTML - 一個img定位權相對DIV

（！）

<div class="text_middle"> 
    <span class="volat_text">App</span> 
    <div id="sport_dropdown"> 
     <span id="sport">Test</span> 
    </div> 
</div> 
<img id="arrow_down" src="img/arrow_down.png">

下面是代碼：http://codepen.io/lalaluki/pen/pNNYpZ

是否有人知道一個把戲？

來源

2016-11-18 lostluke

圖像不能在「text_middle裏面放「div？ – Goombah

你爲什麼不爲你的原始div和圖像創建一個居中的div，然後只是在已經居中的div內部組織它們，無論如何你都不希望 – MichaelB

看看下面的描述。 – lostluke

您可以在.text_middle元素內放置<span>▾</span>之類的東西。我將html代碼用於下側三角形，因爲您沒有在筆示例中提供圖像。但你可以嘗試用圖像或圖形來代替。

<div class="text_middle"> 
    <span class="volat_text">App</span> 
    <div id="sport_dropdown"> 
     <span id="sport">Test</span> 
    </div> 
    <span>&#x25BE;</span> 
</div>

見筆here

來源

2016-11-18 09:20:31 Chris

是的，我知道......但我希望div「text_middle」居中，而不是下拉菜單...下拉應該在居中div附近... – lostluke

是的，你的div'.text_middle'居中。下拉是其中的一部分。 – Chris

是的，我不希望下拉列表是其中的一部分。我希望下拉右對齊... – lostluke

.vertical_align{ 
 
    vertical-align:middle; 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div id="top_bar"> 
 

 
<div class="text_middle"> 
 
      <span class="volat_text">App</span> 
 
      <div id="sport_dropdown"> 
 
      <span id="sport">Test</span> 
 
      <span class="glyphicon glyphicon-chevron-down vertical_align" ></span> 
 
      </div> 
 
     </div>

試試這個。

希望這會有所幫助。

來源

2016-11-18 09:23:58

我會申請float:right到圖像：

#arrow_down { 
    float:right; 
}

來源

2016-11-18 09:28:31

需要改變你的HTML結構來快速實現這一目標。裏面添加「的.text中間人」 DIV圖像

<div class="text_middle"> 
      <span class="volat_text">App</span> 
      <div id="sport_dropdown"> 
      <span id="sport">Test</span> 
      </div> 
      <img id="arrow_down" src="img/arrow_down.png"> 
     </div>

添加垂直居中對齊，以你的形象

#arrow_down { 
vertical-align: middle;}

希望這將幫助你

來源

2016-11-18 09:30:14 PratapRockerss

HTML - 一個img定位權相對DIV

回答

相關問題