如何使用 css/html 移动图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32258016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to move image with css/html
提问by
I am trying to move an image. I Want it to be alligned with the title "Experience". Here is my code
我正在尝试移动图像。我希望它与标题“体验”对齐。这是我的代码
html code
html代码
<header>
<h1>Experience</h1>
<div class="logo">
<img src="./img/exp.png">
</div>
</header>
and the css code
和 css 代码
.logo{
width: 100px;
}
.logo img{
float: left;
margin-left: 0px 0px 0px 30px;
width: 150px;
height: 38px;
}
回答by Mingle Li
Just tweak the CSS a little:
只需稍微调整 CSS：
.logo{
width: 100px;
display: inline-flex;
}
.logo img{
margin: auto 5px;
float: left;
width: 150px;
height: 38px;
}
Does this work?
这行得通吗？
This solution worked for me, but I have no idea for you as you didn't put your full code...
这个解决方案对我有用，但我不知道你，因为你没有把你的完整代码......
回答by Ric
well, looking at what you want maybe this will work: move the img tag inside the header tag(h1) and give it css. Here's what I did:
好吧，看看你想要什么，也许这会奏效：将 img 标签移动到标题标签（h1）内并给它 css。这是我所做的：
<h1>Experience<img style="margin-left:10px" src="./img/exp.png" ></img>
</h1>
OR to make the image go below the text:
或使图像位于文本下方：
<h1>Experience<img style="display:block;margin-left:10px" src="./img/exp.png" ></img>
</h1>
回答by c00kie
Try adding float:left to .logo and setting display: inline-block on your h1, like so:
尝试将 float:left 添加到 .logo 并在 h1 上设置 display: inline-block，如下所示：
*{
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;
}
回答by Radoslaw Statkiewicz
How about making margin-left: 0%; and margin-right. Depends where you want to move it.
You used shorthand for margin-left. We use shorthand for margin only. You did margin-left: top right bottom left instead. I don't think the program reads that correctly.
如何使 margin-left: 0%; 和边距。取决于你想把它移到哪里。
您使用了margin-left 的简写。我们仅将速记用于保证金。你做了 margin-left: top right bottom left 代替。我认为该程序没有正确读取。
