CSS Div Ortalanma Sorunu - Acil Yardım [R10+]

30-04-2021, 17:55:44

Arkadaşlar linkte kodlar mevcut. Sol üstte Preview tuşuna tıklayarak kodları çalıştırabilirsiniz.

http://tpcg.io/htDvCaQP

3 adet div ve içlerine color input yerleştirdim. Birde tüm bunları kapsayan bir div var,(svg-colors) buna text-align:center veriyorum ancak daireler ortalanmıyor.

Bunları nasıl ortalayabilirim, şimdiden yardımlarınız için teşekkürler.

30-04-2021, 17:58:37

#2

Scarecrow

justify-content: center;

Flex kutunuza bu değeri eklerseniz ortalanır.

30-04-2021, 18:00:36

#3

RenkTeknoloji

CSS kodlarını şu şekilde ayarlayabilirsin;

.svg-colors {
display: flex;
margin: auto;
text-align: center;
width: 200px;
}
.svg-color-div {
overflow: hidden;
border-radius: 2em;
height: 48px;
width: 48px;
border: 1px solid #b9b9b9;
margin: 2px auto;
}

yada

.svg-colors {
display: flex;
justify-content: center;

}

30-04-2021, 18:00:37

#4

SLKing

Kimlik doğrulama veya yönetimden onay bekliyor.

Body e display flex ver
Svg colors a flex direction row
Justify content center
Gerekirse

svg colors a display flex ve flex 1

30-04-2021, 18:00:51

#5

DenqeSiz

display: flex;
align-items: center;
justify-content: center;

30-04-2021, 18:02:28

#6

profweb

Scarecrow adlı üyeden alıntı: mesajı görüntüle

justify-content: center;

Flex kutunuza bu değeri eklerseniz ortalanır.

Teşekkürler oldu.

RenkTeknoloji adlı üyeden alıntı: mesajı görüntüle

CSS kodlarını şu şekilde ayarlayabilirsin;

.svg-colors {
display: flex;
margin: auto;
text-align: center;
width: 200px;
}
.svg-color-div {
overflow: hidden;
border-radius: 2em;
height: 48px;
width: 48px;
border: 1px solid #b9b9b9;
margin: 2px auto;
}

SLKing adlı üyeden alıntı: mesajı görüntüle

Body e display flex ver
Svg colors a flex direction row
Justify content center
Gerekirse

svg colors a display flex ve flex 1

DenqeSiz adlı üyeden alıntı: mesajı görüntüle

display: flex;
align-items: center;
justify-content: center;

Cevaplar için çok teşekkürler.