How to put text next to an image (html)?

Question

I make a site on Google Sites. I select a three-column layout and place the images one by one. I want to put text next to the image, but it only works on the first line, and even this is at the "end" of the image. The screenshot below illustrates what I am saying.

Html code:

<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 the entire text string next to the image? For example, at the same height of the image or something like that.

PS . I did not know how to copy the code here, so I’ll take a screenshot. I'm sorry about that.

Answer 1

:

display:inline-block?

1) <div/>, style=display:inline-block vertical-align:top div.

2) div display:inline-block; /div div.

JS Fiddle Demo

Answer 2

float ,

http://www.w3schools.com/css/css_float.asp

Answer 3

float: left; float: right;

fiddle , .

Answer 4

, div, , div, . , , , div, , display: inline-block, div, , display: inline.

display: inline, .

, :

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

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;
}

Answer 5

- , Icon , . :

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

<a href="#" class="MyLink"><img src="./yourImageIcon.png" /><span class="MyLinkText">SIGN IN</span></a>

, - , - ,