html - 将img权限定位到相对div

Question

我有一个中心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

有人知道一招吗？

Answer 1

您可以在 [System.Web.Services.WebMethod] public static string GetCurrentTime(string name) { return "Hello " + name + Environment.NewLine + "The Current Time is: " + DateTime.Now.ToString(); } 元素中放置<span>&#x25BE;</span>之类的内容。我使用html符号代码作为下侧三角形，因为您没有在笔示例中提供图像。但你可以用图像或者字形来尝试它。

.text_middle

查看笔 here

Answer 2

＆＃13;

＆＃13;

.vertical_align{
  vertical-align:middle;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

试试这个。

希望这有帮助。

Answer 3

我会将float:right应用于图片：

#arrow_down {
    float:right;
}

Answer 4

需要更改HTML结构才能快速实现此目的。在'.text-middle'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;}

希望这会对你有所帮助