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

回答

相关问题