afbeeldingen naast elkaar uitlijnen in html

Ik wil 3 afbeeldingen naast elkaar met bijschrift, op dit moment heb ik 3 afbeeldingen van boven naar beneden, met het bijschrift aan de linkerkant, niet in het midden. Hoe zorg ik ervoor dat de afbeeldingen naast elkaar verschijnen met een bijschrift in het midden? Bedankt.

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

Antwoord 1, autoriteit 100%

Bedoel je zoiets als dit?

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

met de imgContainer-stijl als

.imgContainer{
    float:left;
}

Zie ook deze jsfiddle.


Antwoord 2, autoriteit 50%

Ik weet niet precies wat je bedoelde met “het bijschrift in het midden”, maar hier is een oplossing om je afbeeldingen naast elkaar te laten verschijnen, met behulp van het uitstekende 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="https://placehold.it/350x150" height="200" width="200" />
    <p>This is image 1</p>
  </div>
  <div class="container">
    <img class="middle-img" src="https://placehold.it/350x150"/ height="200" width="200" />
    <p>This is image 2</p>
  </div>
  <div class="container">
    <img src="https://placehold.it/350x150" height="200" width="200" />
    <p>This is image 3</p>
  </div>
</div>
</body>
</html>

Antwoord 3, autoriteit 19%

Probeer deze indeling te gebruiken

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

Dit geeft je een echt bijschrift (voeg gewoon de 2e en 3e afbeelding toe met behulp van float:leftzoals anderen suggereerden)


Antwoord 4, autoriteit 12%

Ik stel voor om een container te gebruiken voor elke imgpzoals deze:

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

Pas vervolgens float:lefttoe op elke container. Ik voeg en 5pxmargin righttoe zodat er een spatie tussen elke afbeelding is. Sluit ook altijd je elementen af. Misschien is het in html imgtag niet belangrijk om te sluiten, maar in XHTML wel.

viool

Ook een vriendelijk advies. Probeer inline stijlen zoveel mogelijk te vermijden. Kijk hier eens:

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

Het wordt over het algemeen aanbevolen om gekoppelde stijlbladen te gebruiken, omdat:

  • Ze kunnen door browsers in de cache worden opgeslagen voor prestaties
  • Over het algemeen veel gemakkelijker te onderhouden vanuit een ontwikkelingsperspectief

bron

viool


Antwoord 5, autoriteit 6%

Probeer dit.

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>

Antwoord 6

Hier is hoe ik het zou doen, (maar ik zou een externe stylesheet gebruiken voor dit project en alle andere. Het maakt dingen gewoon makkelijker om mee te werken. Dit voorbeeld is ook met html5.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
  .container {
      display:inline-block;
  }
</style>
</head>
<body>
  <div class="container">
    <figure>
    <img src="https://placehold.it/350x150" height="200" width="200">
    <figcaption>This is image 1</figcaption>
    </figure>
    <figure>
    <img class="middle-img" src="https://placehold.it/350x150"/ height="200" width="200">
    <figcaption>This is image 2</figcaption>
    </figure>
    <figure>
    <img src="https://placehold.it/350x150" height="200" width="200">
    <figcaption>This is image 3</figcaption>
    </figure>
  </div>
</body>
</html>

Antwoord 7

In uw CSS:

.image123{
float:left;
}

Other episodes