web-dev-qa-db-fra.com

Plusieurs lignes de texte à côté de l'image (CSS-HTML)

J'essaie de mettre 2 lignes de texte à côté d'une image, un peu comme ça

_________
|       | Line one of text
| image |
|       | Line two of text
---------

C'est le code que j'ai jusqu'à présent

<p style="color: #fff;"><img src="assets/image.png"><span style="">Line one of text</span>
    <br>
    <span class="ban2">Line 2 of text</span></p>

 .banner p {
  font-family: "Gentium Basic";
  font-size: 19px;
  text-align: center;
  color: #aaa;
  margin-top: -10;
  display: block;
 }
.banner img {
  float: center; 
    margin: 5px;
 }
 .banner span {
  padding-top: 50px;
  font-size: 17px;
  vertical-align:top;
 }
  .banner .ban2 span {
  padding-top: 50px;
  font-size: 17px;
  vertical-align:top;
 }

Mais actuellement, il fait ceci:

_________
|       | Line one of text
| image |
|       | 
---------
Line two of text

J'ai regardé partout sur le Web mais je n'ai pas été capable de trouver comment faire cela, toute aide serait la bienvenue.

htmlcssimagealignment
21
OstlerDev

float: center; Vous ne pouvez pas choisir left, right ou none.

http://jsfiddle.net/vd7X8/1/

Si vous float: left; sur l'image, il fera ce que vous cherchez.

Si vous voulez qu'elle soit centrée, vous devrez alors envelopper l'image et le texte dans un conteneur, fixer la largeur du conteneur et y faire margin: 0 auto;, puis continuer à faire flotter votre image - sauf qu'elle sera contrainte par le wrapper.

16
Ming

Voici un extrait utilisant un svg afin que vous puissiez le tester n’importe où.

.img{
    float: left;
    margin-right:1rem;
}
<div>
  <svg class="img" width="50" height="50" >
    <rect width="50" height="50" style="fill:black;"/>
  </svg>
  <p>
    Line 1
    <br>
    Line 2
  </p>
</div>

3
mvndaai

Je sais que ce message est ancien, mais placez votre élément dans une div et appliquez le vertical-align:top à cette div et vous avez terminé. 

2
user3491125

Vérifie ça. C'est bien défini css.

<!DOCTYPE html>
<html>
   <head>
      <title>Selectors</title>
      <style>
         .banner p {
             font-family: "Gentium Basic";
             font-size: 19px;
             text-align: center;
             color: #aaa;
             margin-top: -10;
             display: block;
         }
         img, span {
             float:left;
         }
         .banner img {
             float: center; 
             margin: 5px;
         }
         [class="ban1"]{
             font-size: 17px;
             position:relative;
             top:50px;
             left:11px;
         }
         [class="ban2"] {
             font-size: 17px;
             position: relative;
             left: -97px;
             top: 74px;
         }
      </style>
   </head>
   <body>
      <div class="banner">
         <div class="wrapper">
            <p><img src="span.png"><span class="ban1">Line one of text</span>
               <span class="ban2">Line 2 of text</span>
            </p>
         </div>
      </div>
   </body>
</html>
1
Asraful Haque

Je sais que ceci est un vieux message, mais je voulais toujours dire que non seulement float le fera, la balise <img> a un attribut intégré appelé align="left" qui le fait aussi

<p>
 <img src="smiley.gif" align="left"><span>Line one of text</span>
 <br>
 <span class="ban2">Line 2 of text</span>
</p>

Fiddle: http://jsfiddle.net/356akcoy/

0
Ricky Levi