Birden fazla div'e aynı özellik nasıl verilir?

00PARZIVAL00

Picopat
Katılım
23 Temmuz 2022
Mesajlar
520
Çözümler
1
Daha fazla  
Cinsiyet
Diğer
Merhaba, şu aşağıdaki gibi birden fazla div var ve display Flex verilerek yan yana getirilmiş.
Hepsini birbirine yapışık şekilde ortalamak istiyorum.
Birkaç şey denedim; divler oluşturup margin vermek, text-align tarzı şeyler ama olmadı.



HTML:
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="upDesigns">
        <div id="upDesign"></div>
        <div style="margin: auto">
            <div style="display: flex;">
                <div class="squares">try</div>
                <div class="squares">try</div>
                <div class="squares">try</div>
            </div>
        </div>
    </div>
</body>

</html>


CSS:
* {
  padding: 0;
  margin: 0;
  z-index: 1;
}

#upDesign {
  background-color: rgb(39, 122, 199);
  width: 100%;
  height: 50px;
}

.squares {
  background-color: antiquewhite;
  height: 50px;
  width: 150px;
  border: 0.1px solid black;
  text-align: center;
}/*# sourceMappingURL=style.css.map */
 
Son düzenleyen: Moderatör:
CSS klasöründe .squares bloğuna margin değerini verin.

Squares'i kapsayan dive margin değeri verirseniz olacak gibi. Yani style yazan yere class verin.

Bunu denedim, fakat 3 div arasında boşluk oluşuyor şu şekilde.

1673210747369.png


Sadece en baştakine verirsem de şu şekilde oluyor.

1673210722026.png


Benim yapmaya çalıştığım hepsi birleşik bir şekilde ortada olacak.
 
Şu şekilde istediğimi yaptım

<div style="display: flex; margin: 0 50% 0 38%; width: fit-content;"



Öyle bir kod bulamadım.
Dostum sanırım o düşündüğüm şey pek sağlıklı değil. Bunu yapmanı öneririm. Align-items'ı da silebilirsin gibi gözüküyor. Bir şey değişmedi silince.
<body>
<div id="upDesigns">
<div id="upDesign"></div>
<div style="display: flex;justify-content: center;align-items: center;>
<div style="display: flex;">
<div class="squares">try</div>
<div class="squares">try</div>
<div class="squares">try</div>
</div>
</div>
</div>
</body>

</html>
1673211896456.png
 
Dostum sanırım o düşündüğüm şey pek sağlıklı değil. Bunu yapmanı öneririm. Align-items'ı da silebilirsin gibi gözüküyor. Bir şey değişmedi silince.
<body>
<div id="upDesigns">
<div id="upDesign"></div>
<div style="display: flex;justify-content: center;align-items: center;>
<div style="display: flex;">
<div class="squares">try</div>
<div class="squares">try</div>
<div class="squares">try</div>
</div>
</div>
</div>
</body>

</html>
Eki Görüntüle 1627375

Evet bu şekilde otomatik pencereye göre de ayarlanıyor.
 
Şu şekilde istediğimi yaptım

<div style="display: flex; margin: 0 50% 0 38%; width: fit-content;"



Öyle bir kod bulamadım.
 

Bu konuyu görüntüleyen kullanıcılar

Technopat Haberler

Geri
Yukarı