alinierea imaginilor una lângă alta în html (Programare, Html, Css, Aliniere)

user3809938 a intrebat.

Vreau 3 imagini alăturate cu legendă, în momentul de față am 3 imagini care merg de sus în jos, cu legendă în stânga, nu în centru. Cum fac ca imaginile să apară una lângă alta cu legenda în mijloc? Mulțumesc.

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

Comentarii

  • posibil duplicat al CSS – centrarea a două imagini în css una lângă alta  > Por Liam.
  • Posibil duplicat al afișării a două imagini una lângă alta pe o pagină HTML –  > Por Ashish Ahuja.
7 răspunsuri
James

Vrei să spui ceva de genul acesta?

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

cu stilul imgContainer ca

.imgContainer{
    float:left;
}

De asemenea, vedeți acest lucru jsfiddle.

Comentarii

  • Mulțumesc, dar cum se face că nu menționați clasa în pagina CSS, cum știe div-ul din pagina CSS că vă referiți la image class=”image123″. De asemenea, știi cum să pui textul în centrul imaginii? –  > Por user3809938.
  • Dacă aveți de gând să folosiți float pentru a face acest lucru ar trebui să îl ștergeți și pe acesta, vă salvați o lume întreagă de durere mai târziu. Personal, cred că display:block este o soluție mai bună pentru această problemă. float-urile ar trebui folosite cu moderație, iar dacă există o alternativă, deloc. –  > Por Liam.
  • Nu am folosit clasele image123 sau middle-img. Ar fi trebuit să le scot. Nu sunt sigur ce vrei să spui prin text în centrul imaginii, te referi la faptul că este deasupra imaginii? @Liam Mulțumesc pentru sfaturi, nu am știut niciodată că elementele plutitoare nu se adaugă la înălțimea părinților lor, asta explică de ce am văzut asta din când în când! Care este avantajul compensării față de a da părintelui auto overflow? Pare dezordonat să adaugi un div suplimentar? –  > Por James.
  • Overflow:auto este o metodă de compensare a elementelor plutitoare. Există câteva. –  > Por Liam.
  • De asemenea, comentariul meu de mai sus ar trebui să fie display:inline-block…?! –  > Por Liam.
Pierre-Adrien

Nu sunt foarte sigur ce ați vrut să spuneți prin „legenda din mijloc”, dar iată o soluție pentru a face ca imaginile să apară una lângă alta, folosind excelentul 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>

Comentarii

  • Da, v-aș recomanda acest lucru în locul flotorilor. –  > Por Michael.
  • bună ziua, știți dacă este posibil să schimbați fontul textului de sub imagine? Ar trebui să folosesc CSS. –  > Por user3809938.
  • @user380999938 : bună, poate ar trebui să arunci o privire la bazele CSS, nu crezi ? Și mai exact la font-family. Cred că nu ar strica. –  > Por Pierre-Adrien.
DarkNinja955

Încearcă să folosești acest 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>

Acest lucru vă va oferi o legendă reală (doar adăugați a doua și a treia imagine folosind Float:left așa cum au sugerat alții)

Comentarii

Alex Char

Vă sugerez să folosiți un container pentru fiecare img p astfel:

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

Apoi aplicați float:left pentru fiecare container. Eu adaug și 5px margin right astfel încât să existe un spațiu între fiecare imagine. De asemenea, închideți întotdeauna elementele. Poate în html img nu este important să închideți tag-ul, dar în XHTML este.

fiddle

De asemenea, un sfat prietenesc. Încearcă să eviți stilurile inline cât mai mult posibil. Aruncați o privire aici:

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

În general, este recomandat să folosiți foi de stil legate, deoarece:

  • pot fi stocate în memoria cache de către browsere pentru performanță
  • În general, sunt mult mai ușor de întreținut din punct de vedere al dezvoltării.

sursa

fiddle

Michael Bellamy

Încercați acest.

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>

Paydros

Iată cum aș face-o, (cu toate acestea, aș folosi o foaie de stil externă pentru acest proiect și pentru toate celelalte. doar face lucrurile mai ușor de lucrat cu. De asemenea, acest exemplu este cu 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="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>

Logern

În CSS-ul tău:

.image123{
float:left;
}