如何將文字與圖片中的圖片垂直對齊<div>

Question

我正在嘗試在左側有文字的同時在角落里有一個圖像。 我的問題是文本在底部。 我已經嘗試過垂直對齊和其他一些東西。 這是代碼：

    <div id="taskbar">
        <div id="links">
            <img src = "link"/> <!--Need a version where the white is not in the image. Should look nicer -->
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Jobs</li>
                <li>Social</li>
                <a href = "link"> <li>Blog</li> </a>
                <li>FAQ</li>
                <li>More</li>
            </ul>
        </div>
    </div>
    #taskbar
    {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        display: inline-block;
        background-color: lightgrey;
    }
    ul
    {
        list-style-type: none;
        text-align: right;
        padding-left: 25px;
    }
    li
    {
        display: inline;
         padding: 25px;
    }
    div img
    {
       padding-top: 5px;
       padding-left: 5px;
       height: 75px;
       width: 75px;
    }
    a
    {
        text-decoration: none;
    }

Answer 1

加上這個

  ul  {
      list-style-type: none;
      text-align: left; /* or right, which ever you want */
      padding-left: 25px;
      display: inline-block;
    }
    div img
    {
      display: inline-block;
    }

我所做的就是將內聯塊添加到ul和圖像中。

Answer 2

使用 Float:left 更新CSS Float:left

li
    {
        display: inline;
        float:left;
         padding: 25px;
    }
    div img
    {
       padding-top: 5px;
       padding-left: 5px;
       height: 75px;
       width: 75px;
       float:left;
    }

現場演示