web-dev-qa-db-fra.com

Comment mettre un texte à côté de l'image (html)?

Je crée un site sur Google Sites. Je choisis la disposition en 3 colonnes et mets les images une par une. Je veux mettre le texte à côté de l'image, mais cela ne fonctionne qu'avec la première ligne, et même cela se trouve "à la fin" de l'image. La capture d'écran ci-dessous illustre ce que je dis. 

screenshot

Le 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>

Alors, que puis-je faire pour mettre toute la ligne de texte à côté de l'image? Comme à la même hauteur de l'image, ou quelque chose comme ça.

PS.: Je ne savais pas comment copier le code ici, alors je prends une capture d'écran. Je suis désolé à ce sujet.

htmlhtml5imagewebgoogle-sites
5
U23r

Vous devez suivre ce scénario:

Que diriez-vous d'utiliser display:inline-block?

1) Prenez un <div/> donnez-lui style=display:inline-block faites-le vertical-align:top et mettez l'image à l'intérieur de cette div.

2) Prenez un autre div et donnez-lui aussi le même style display:inline-block; et mettez tous les libellés/divs dans ce div.

Voici le prototype de votre besoin

 

JS Fiddle Démo

11
Dhaval Marthak

faire l'image float: left; et le texte float: right;

Jetez un coup d'oeil à ceci violon J'ai utilisé une photo en ligne, mais vous pouvez simplement l'échanger pour votre photo.

4
Nathan Yeung

Utilisez des flotteurs pour faire flotter l'image, le texte doit être placé à côté de

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

3
user1994804

Si vous, ou un autre renard, souhaitez créer un lien avec Icon Image, le texte ci-contre apparaît à côté de l'image. Voir le code ci-dessous:

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>

 enter image description here

si vous voyez l'image, la partie blanche correspond à l'icône d'image et l'autre à style De cette manière, vous pourrez créer différents boutons avec n'importe quel type d'icônes que vous souhaitez concevoir.

1
Mehdi Jalal

J'ai eu un problème similaire, où j'avais une div qui tenait l'image et une autre qui tenait le texte. La raison pour laquelle le mien ne fonctionnait pas était que la div contenant l'image avait display: inline-block tandis que la div contenant le texte avait display: inline. 

Je l'ai changé pour les deux être display: inline et cela a fonctionné. 

Voici une solution pour une section d'en-tête de base avec un logo, un titre et un slogan:

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;
}
0
Russel Fish