如何使用CSS/HTML移动图像

Question

我正在尝试移动一张图片，希望它与标题“经验”对齐。这是我的代码：

HTML 代码

<header>
    <h1>Experience</h1>
        <div class="logo">
            <img src="./img/exp.png">
        </div>
</header>

以及CSS代码

.logo{
width: 100px;
    }

.logo img{
float: left;
margin-left: 0px 0px 0px 30px;
width: 150px;
height: 38px;
}

- user4798789

---

你的 margin-left 属性无效。margin-left 只接受一个值，你可能想要使用 margin。另外，你希望它对齐在哪里？是在文本旁边吗？ - Jack Guy

垂直排列文本。 - user4798789

我猜你想要它水平向左对齐。如果是这样，就删除 float:left 和 margin，使用 position: absolute; left: 0px; 并将标题设置为 position: relative;。 - Jack Guy

保持不变。我想要在那个蓝色矩形中显示图像。 - user4798789

它会起作用的。https://jsbin.com/nipitesama/edit?html，css，输出 - Jack Guy

对齐方式是什么？垂直还是水平？ - lisarko8077

Answer 1

只需微调 CSS：

.logo{
    width: 100px;
    display: inline-flex;
}

.logo img{
    margin: auto 5px;
    float: left;
    width: 150px;
    height: 38px;
}

这个有用吗？

这个解决方案对我有效，但是由于你没有提供完整的代码，我不知道它是否适用于你...

- Mingle Li

Answer 2

如果你想移动它，可以考虑将margin-left设置为0%，并根据需要设置margin-right。
你使用了margin-left的简写方式，但我们只使用margin的简写方式。你使用了margin-left: top right bottom left的方式，我认为程序可能无法正确读取。

- Radoslaw Statkiewicz

Answer 3

尝试将float:left添加到 .logo，并将display:inline-block设置在你的h1上，如下所示：

   *{
      margin: 0px;
      padding: 0px;
      font-family: Arial, Helvetica, Sans-serif;
      font-size: 34px
    }


    header{
        background-image: url(../img/bar.png);
        background-color: #00B9ED;
        height: 75px;
        border-bottom: 0px;
        padding-left: auto;
        padding-right: auto;
        width: 100%; 

    }   

    .logo{
        width: 100px;
        float: left;
        //display: inline-flex;
        }

    .logo img{
        margin: auto 5px;
        float: left;
        width: 150px;
        height: 38px;
    }
    h1 {
        display: inline-block;
    }

- c00kie