如何将 HTML 图片/文本放在 div 中的同一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11639388/
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 put HTML picture / text on the same line in a div?
提问by user1472747
I've been using HTML/CSS for ~2 weeks now.
我已经使用 HTML/CSS 大约 2 周了。
I'm having trouble getting the text on my siteto sit right next to the puppy thumbnail, rather than under it.
我无法将我网站上的文本放在小狗缩略图的旁边，而不是它的下面。
If I float both the text and the picture, they are side by side, but the text is first, not the picture. Why would this be? The text comes AFTER the picture in the HTML.
如果我同时浮动文字和图片，它们是并排的，但首先是文字，而不是图片。为什么会这样？文本出现在 HTML 中的图片之后。
Here is the JSFiddle. I've never used JSF before so I hope I did it correctly. I don't know why the pictures in the JSF aren't working (the external link ones (puppies)).
这是 JSFiddle。我以前从未使用过 JSF，所以我希望我做对了。我不知道为什么 JSF 中的图片不起作用（外部链接的（小狗））。
回答by BumbleB2na
When lining up images and text, I like to use inline or inline-block elements rather than put them inside a block element. Here is an examplethat should work for your case in particular.
在排列图像和文本时，我喜欢使用 inline 或 inline-block 元素，而不是将它们放在块元素中。这是一个特别适用于您的案例的示例。
Html
html
<p>
Vertically centered text
<img src="http://www.suffolkdogday.com/wp-content/themes/sdd/images/dog.png" style="vertical-align:middle">
</p>?
回答by iamruss
Check this out http://jsfiddle.net/nhv54/3/
看看这个 http://jsfiddle.net/nhv54/3/
Things to notice in CSS
CSS 中的注意事项
.pull-left * {
float: left;
}
And every div you want content to be on one line should have class "pull-left"
并且您希望内容在一行上的每个 div 都应该具有“左拉”类
<div class = "ProjectsModules pull-left" id = "example1">
<img src = "http://royalk9.ca/uploads/images/_thumbs/beagle-puppy .jpg"/>
<div id = "ProjectsModulesText">
<h1> Jim </h1>
<p>
stuff
</p>
</div>
</div>
回答by dezman
You can also set vertical-align: middle;on whatever tag your text is inside, presumably a p.
您还可以设置vertical-align: middle;文本所在的任何标签，大概是p.
回答by Theorian
You could use inline-blocks
你可以使用内联块
I updated your JSFIDDLE
我更新了你的 JSFIDDLE
