web-dev-qa-db-fra.com

aligner les images côte à côte en html

Je veux 3 images côte à côte avec la légende, pour le moment j'ai 3 images qui vont de haut en bas, avec la légende à gauche et non au centre Comment faire en sorte que les images apparaissent côte à côte avec une légende au milieu? Merci. 

<div class="image123">
    <img src="/images/tv.gif" height="200" width="200" style="float:left">
    <p>This is image 1</p>
    <img class="middle-img" src="/images/tv.gif"/ height="200" width="200">
    <p>This is image 2</p>
    <img src="/images/tv.gif"/ height="200" width="200">
    <p>This is image 3</p>
</div>
htmlcsshtml5css3alignment
13
user3809938

Tu veux dire quelque chose comme ca? 

<div class="image123">
    <div class="imgContainer">
        <img src="/images/tv.gif" height="200" width="200"/>
        <p>This is image 1</p>
    </div>
    <div class="imgContainer">
        <img class="middle-img" src="/images/tv.gif"/ height="200" width="200"/>
        <p>This is image 2</p>
    </div>
    <div class="imgContainer">
         <img src="/images/tv.gif"/ height="200" width="200"/>
        <p>This is image 3</p>
    </div>
</div>

avec le style imgContainer comme 

.imgContainer{
    float:left;
}

Voir aussi ceci jsfiddle .

16
James

Vous ne savez pas vraiment ce que vous entendez par "la légende au milieu", mais voici une solution pour que vos images apparaissent côte à côte, en utilisant l'excellent display:inline-block:

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title></title>
  <style>
    div.container {
      display:inline-block;
    }

    p {
      text-align:center;
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="http://placehold.it/350x150" height="200" width="200" />
    <p>This is image 1</p>
  </div>
  <div class="container">
    <img class="middle-img" src="http://placehold.it/350x150"/ height="200" width="200" />
    <p>This is image 2</p>
  </div>
  <div class="container">
    <img src="http://placehold.it/350x150" height="200" width="200" />
    <p>This is image 3</p>
  </div>
</div>
</body>
</html>
6
Pierre-Adrien Buisson

Essayez d'utiliser ce format 

<figure>
   <img src="img" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

Cela vous donnera une vraie légende (ajoutez simplement les 2e et 3e images en utilisant Float:left comme les autres suggestions)

2
DarkNinja955

Essayez this .

CSS

.imageContainer {
    float: left;
}

p {
    text-align: center;
}

HTML

<div class="image123">
    <div class="imageContainer">
        <img src="/images/tv.gif" height="200" width="200" />
        <p>This is image 1</p>
    </div>
    <div class="imageContainer">
        <img class="middle-img" src="/images/tv.gif"/ height="200" width="200" />
        <p>This is image 2</p>
    </div>
    <div class="imageContainer">    
        <img src="/images/tv.gif"/ height="200" width="200"/>
        <p>This is image 3</p>
    </div>
</div>
0
Michael Bellamy

Voici comment je le ferais (cependant, j'utiliserais une feuille de style externe pour ce projet et pour tous les autres. Cela facilite simplement le travail. Avec cet exemple, utilisez HTML 5.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
  .container {
      display:inline-block;
  }
</style>
</head>
<body>

  <div class="container">
    <figure>
    <img src="http://placehold.it/350x150" height="200" width="200">
    <figcaption>This is image 1</figcaption>
    </figure>

    <figure>
    <img class="middle-img" src="http://placehold.it/350x150"/ height="200" width="200">
    <figcaption>This is image 2</figcaption>
    </figure>

    <figure>
    <img src="http://placehold.it/350x150" height="200" width="200">
    <figcaption>This is image 3</figcaption>
    </figure>

  </div>
</body>
</html>
0
Paydros

Je suggère d'utiliser un conteneur pour chaque imgp comme ceci:

<div class="image123">
    <div style="float:left;margin-right:5px;">
        <img src="/images/tv.gif" height="200" width="200"  />
        <p style="text-align:center;">This is image 1</p>
    </div>
    <div style="float:left;margin-right:5px;">
        <img class="middle-img" src="/images/tv.gif/" height="200" width="200" />
        <p style="text-align:center;">This is image 2</p>
    </div>
    <div style="float:left;margin-right:5px;">
        <img src="/images/tv.gif/" height="200" width="200" />
        <p style="text-align:center;">This is image 3</p>
    </div>
</div>

Appliquez ensuite float:left à chaque conteneur. J'ajoute et 5pxmargin right donc il y a un espace entre chaque image. Fermez toujours vos éléments. Peut-être que dans html img tag n'est pas important à fermer mais en XHTML est.

violon

Aussi un conseil amical. Essayez d'éviter autant que possible les styles en ligne. Jetez un coup d'oeil ici:

html

<div class="image123">
    <div>
        <img src="/images/tv.gif" />
        <p>This is image 1</p>
    </div>
    <div>
        <img class="middle-img" src="/images/tv.gif/" />
        <p>This is image 2</p>
    </div>
    <div>
        <img src="/images/tv.gif/" />
        <p>This is image 3</p>
    </div>
</div>

css

div{
    float:left;
    margin-right:5px;
}

div > img{
   height:200px;
    width:200px;
}

p{
    text-align:center;
}

Il est généralement recommandé d'utiliser des feuilles de style liées pour les raisons suivantes:

  • Ils peuvent être mis en cache par les navigateurs pour améliorer les performances
  • Généralement beaucoup plus facile à maintenir dans une perspective de développement

la source

violon

0
Alex Char