html - ein img Recht auf eine relative Positionierung div

ich ein Zentrum div und ein einfaches Problem haben ... Ich weiß nicht, wie man ein Bild platzieren Recht darauf relativ wie folgt aus: html - ein img Recht auf eine relative Positionierung div

(!) Hier

<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">

ist der Code: http://codepen.io/lalaluki/pen/pNNYpZ

Hat jemand kennt einen Trick?

Quelle

2016-11-18 lostluke

Das Bild wird nicht in der „text_middle gesetzt werden kann "div? – Goombah

Warum erstellst du kein zentriertes div für dein original div und das image, dann ordne es einfach innerhalb des bereits zentrierten divs, das du willst – MichaelB

nein schau dir die Beschreibung an. – lostluke

Sie können etwas wie <span>▾</span> in Ihr Element einfügen. Ich habe den HTML-Code für ein unteres Dreieck verwendet, weil Sie das Bild in Ihrem Stiftbeispiel nicht angegeben haben. Aber Sie können es stattdessen mit einem Bild oder Glyphon versuchen.

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

Siehe den Stift here

Quelle

2016-11-18 09:20:31 Chris

ja ich weiß ... Aber ich möchte das div "text_middle" zentriert und nicht das Dropdown ... Das Dropdown sollte in der Nähe der zentrierten div ... – lostluke

ja, du div '.text_middle' ist zentriert. Das Dropdown ist Teil davon. – Chris

Ja, und ich möchte nicht, dass das Dropdown-Menü Teil von ist. Ich möchte, dass das Dropdown rechts ausgerichtet ... – 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>

bereits.

Hoffe, das hilft.

Quelle

2016-11-18 09:23:58

würde ich float:right auf das Bild anwenden:

#arrow_down { 
    float:right; 
}

Quelle

2016-11-18 09:28:31

Müssen Sie Ihre HTML-Struktur zu ändern, dies schnell zu erreichen. Bild hinzufügen innen '.text-Mitte' 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>

vertical align Mitte auf Ihr Bild

#arrow_down { 
vertical-align: middle;}

Hope this helfen Ihnen

Quelle

2016-11-18 09:30:14 PratapRockerss

html - ein img Recht auf eine relative Positionierung div

Antwort

Verwandte Themen