如何在图像（html）旁边放置文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19302122/
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 a text beside the image (html)?
提问by U23r
I'm making a website on Google Sites. I choose the 3 column layout and put the images one by one. I want to put the text beside the imagem, but it only works with the first line, and even that is in "the end" of the image. The screenshot below ilustrates what I'm saying.
我正在制作一个网站Google Sites。我选择了 3 列布局并将图像一张一张。我想将文本放在 imagem 旁边，但它只适用于第一行，甚至在图像的“末尾”。下面的屏幕截图说明了我在说什么。
The html code:
html代码：
<div style="display:block;text-align:left">
<h2><span style="color:rgb(7,55,99)">Students</span></h2>
<hr>
<br>
<div style="display:block;text-align:left"><a href="https://some.addres" imageanchor="1"><img align="left" src="https://some.addres/blue-user-icon.png" border="0"></a>- Name<br>
- Major<br>
- Email<br>
- Lattest</div>
</div>
<br>
<br>
So, what can I do to put all the text line beside the image? Like, at the same height of the image, or something like that.
那么，我该怎么做才能将所有文本行放在图像旁边？就像，在图像的相同高度，或类似的东西。
PS.: I didn't know how to copy the code here, so I take a screenshot. I'm sorry about that.
PS.: 我不知道如何复制这里的代码，所以我截图了。我很抱歉。
回答by Dhaval Marthak
You need to go throgh these scenario:
你需要通过这些场景：
How about using display:inline-block?
怎么用display:inline-block？
1) Take one <div/>give it style=display:inline-blockmake it vertical-align:topand put image inside that div.
1）拿一个<div/>给它style=display:inline-block做它vertical-align:top并将图像放在那个div中。
2) Take another div and give it also the same style display:inline-block;and put all the labels/divs inside this div.
2) 取另一个 div 并给它同样的样式display:inline-block;，并将所有标签/div 放在这个 div 中。
Here is the prototype of your requirement
这是您的要求的原型
JS Fiddle Demo
JS小提琴演示
回答by U23r
Use floats to float the image, the text should wrap beside
使用浮动来浮动图像，文本应该在旁边换行
回答by Nathan Yeung
回答by MJVM
If you or some other fox who need to have link with Icon Image and text as link text beside the image see bellow code:
如果您或其他需要将图标图像和文本作为图像旁边的链接文本链接的狐狸，请参阅以下代码：
CSS
CSS
.linkWithImageIcon{
Display:inline-block;
}
.MyLink{
Background:#FF3300;
width:200px;
height:70px;
vertical-align:top;
display:inline-block; font-weight:bold;
}
.MyLinkText{
/*---The margin depends on how the image size is ---*/
display:inline-block; margin-top:5px;
}
HTML
HTML
<a href="#" class="MyLink"><img src="./yourImageIcon.png" /><span class="MyLinkText">SIGN IN</span></a>
if you see the image the white portion is image icon and other is style this way you can create different buttons with any type of Icons you want to design
如果您看到图像，白色部分是图像图标，而其他部分是这种样式，您可以使用要设计的任何类型的图标创建不同的按钮
回答by Russel Fish
I had a similar issue, where I had one div holding the image, and one div holding the text. The reason mine wasn't working, was that the div holding the image had display: inline-blockwhile the div holding the text had display: inline.
我有一个类似的问题，我有一个 div 保存图像，一个 div 保存文本。我的不工作的原因是，持有图像display: inline-block的 div具有，而持有文本的 div 具有display: inline.
I changed it to both be display: inlineand it worked.
我将其更改为两者display: inline并且它起作用了。
Here's a solution for a basic header section with a logo, title and tagline:
这是带有徽标、标题和标语的基本标题部分的解决方案：
HTML
HTML
<div class="site-branding">
<div class="site-branding-logo">
<img src="add/Your/URI/Here" alt="what Is The Image About?" />
</div>
</div>
<div class="site-branding-text">
<h1 id="site-title">Site Title</h1>
<h2 id="site-tagline">Site Tagline</h2>
</div>
CSS
CSS
div.site-branding { /* Position Logo and Text */
display: inline-block;
vertical-align: middle;
}
div.site-branding-logo { /* Position logo within site-branding */
display: inline;
vertical-align: middle;
}
div.site-branding-text { /* Position text within site-branding */
display: inline;
width: 350px;
margin: auto 0;
vertical-align: middle;
}
div.site-branding-title { /* Position title within text */
display: inline;
}
div.site-branding-tagline { /* Position tagline within text */
display: block;
}
