HTML'de resimler yan yana hizalanıp altlarına nasıl yazı yazılır?

Kxaan dedi:

Aşağıda html kodunu bıraktım, img src kısmına resimlerinizin yollarını yazmanız gerek sadece.

[CODE lang="html" title="HTML"]<div class="container">
<div class="card">
<img src="" alt="donut1">
<h1> Donut 1 </h1>
</div>
<div class="card">
<img src="" alt="donut2">
<h1> Donut 2 </h1>
</div>
<div class="card">
<img src="" alt="donut3">
<h1> Donut 3 </h1>
</div>
</div>[/CODE]

Alttaki css'te pek bişey yapmadım gerisini size bırakıyorum, takıldığınız bir yer olursa yardımcı olurum.

[CODE lang="css" title="CSS"].container {
/* display flex yan yana gelmelerini sağlayacaktır
daha fazla bilgi için flexbox yapısına göz atabilirsiniz. */
display: flex;
}

.card h1 {
/* burayı kullanarak resmin altındaki başlığı
düzenleyebilirsiniz */
}

.card img {
/* burayı kullanarak resmi düzenleyebilirsiniz */
}[/CODE]

Genişletmek için tıkla...

EMİR37 dedi:

Bende CSS'yi yapamıyorum.

Genişletmek için tıkla...

Kutleloove dedi:

CSS oldukça basit. Hiç yapamıyorsan tarayıcıyı aç diğer web sitelerine girerek öğeyi denetle ile kodları incele. Biraz İngilizcen varsa zaten hangi kod ne işe yarıyor anlıyorsun. (Kodu çal demiyorum öğren ve geliştir)

Genişletmek için tıkla...

Acı Rakı dedi:

Selamlar, bir web site yapıyorum fakat ufak bir sorunum var. Resimdeki ana sayfam ve donut resimlerini yan yana sıralamam lazım. Sıralanıyor ama hepsinin kendi altına yazı eklemem lazım ve ekleyince üst üste duruyor. Bunu nasıl düzeltebilirim?

Eki Görüntüle 1371990

Genişletmek için tıkla...

.column {
  text-align: center;
  max-width: 1200px
  margin: 0 auto;
  display: grid;
}

@media (min-width: 600px) {
  .column { grid-template-columns: repeat(2, 1fr); }
}

<div class="column">
<div>
    <img>
    <h1>
    </h1>
    </div>
<div>
    <img>
    <h1>
    </h1>
    </div>
<div>
    <img>
    <h1>
    </h1>
    </div>
</div>