如何将HTML图片/文本放在div的同一行上?
问题描述:
我一直在使用HTML/CSS约2周。如何将HTML图片/文本放在div的同一行上?
我无法让我的site上的文字坐在小狗缩图旁边,而不是在它下面。
如果我浮动文本和图片,他们并排,但文本是第一,而不是图片。为什么会这样?该文本在HTML中的图片之后出现。
这里是JSFiddle。我以前从未使用过JSF,所以我希望我做的正确。我不知道为什么JSF中的图片不工作(外部链接的(小狗))。
答
当排队的图像和文本,我喜欢使用内联或内联块元素,而不是把它们的块元件的内部。 Here is an example特别适合你的情况。
的Html
<p>
Vertically centered text
<img src="http://www.suffolkdogday.com/wp-content/themes/sdd/images/dog.png" style="vertical-align:middle">
</p>
答
检查了这一点 http://jsfiddle.net/nhv54/3/
相近的CSS注意到
.pull-left * {
float: 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>
+0
该图像的URL是一个404.你可能想要修改/更新你的答案/提琴使用https://placehold.it/图像 - 即:http: //placehold.it/20x20 – 2016-12-30 22:07:13
答
您还可以设置vertical-align: middle;
您的文本在里面的任何标签,大概是p
。
即图像的URL是404,您可能需要修改/使用HTTPS更新你的答案/提琴:// PLACEHOLD .it /图像 - 即:http://placehold.it/20x20 – 2016-12-30 22:07:06