HTML vs CSS'te "text align" kodu yazılmasına rağmen yazı konumlandırılmıyor

AhmetKnKc · 3 Eylül 2023

kaygusuzronin dedi:

Kod:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .kutu
        {
            background-color: aqua;
            width: 100px;
            height: 100px;
        }
        .bir
        {
            text-align: center;
            border: 1px solid red;
        }
        .iki
        {
            text-align: center;
            border: 1px solid red;
        }
    </style>
</head>
<body>
   
    <div class="kutu">
        <p class="bir">
            bir
        </p>
        <p class="iki">
            iki
        </p>
    </div>

</body>
</html>

Şunu paylaşmayı unutmuşum.

Eğer alt alta olmasını istiyor isem tek tagında bir ve iki yazdırırdım.

HTML:

<p>
bir
<br>
iki
</p>

Gibi.

kaygusuzronin · 3 Eylül 2023

AhmetKnKc dedi:
HTML:

 bir. iki. 

gibi.

Hocam çok zorluyormuşum gibi olacak da benim merak ettiğim kısım: "p" etiketinin alttan ve üstten bıraktığı boşluğu kaldırmak için bir komut var mı?
Yoksa ya gösterdiğiniz gibi ya da margin veya position kullanılarak diğer yazılar, bu boşluklara mı getirilir?

249873 · 3 Eylül 2023

kaygusuzronin dedi:
Kodu kaldırınca ortalanıyor fakat kaldırmadığımda niye olmuyor?

İnline, demek çerçevenizin yani tagının içindekiler kadar yer kapla demek. Yani o satırı full kaplamıyor. Sen ortala dediğinde neyi ortalıyacağım? Zaten boş yerim yok. Diyor.

Sen p tagından sonra yazı yazarsan, bu direk senin technopat yazının yanına gelir. Çünkü p tagı sadece technopat yazısını kapsar. Ve ortalamak için yeterli boşluğa sahip olamaz.

Display block ise, tüm satırı kaplar. Bu sayede hizalama ve ortalama işlemlerini kolayca yapabilirsiniz. Block'ta ise p tagından sonra yazı yazarsanız mecbur bir sonra ki satırda yazmış olursunuz.

Text align komutu. Tagın içindekileri hizalar. margin ile de ortalama yapabilirsiniz. Bu yöntemde çerçeveyi yani p tagını ortalarsınız. Text align ile p tagının içindekileri.

Margin ile ortalamak için ise, margin-left= auto ve margin-right: auto 'yu kullanabilirsiniz. Özeti sağa ve sola otomatik boşluk verdirtir. Marginin olayı. Çerçeve'nin dışına müdahale edebilmesidir. Padding ise çerçevenin içine müdahale eder. Yani border(çerçeve) ile yazdığın yazı arasında boşluk vermek istersen padding. Border'ın dışına bir boşluk işlemi yapacaksan margin.

kaygusuzronin · 3 Eylül 2023

mahmutxd07 dedi:
İnline, demek çerçevenizin yani tagının içindekiler kadar yer kapla demek. Yani o satırı Full kaplamıyor. Sen ortala dediğinde neyi ortalıyacağım? Zaten boş yerim yok. Diyor.

Sen p tagından sonra yazı yazarsan, bu direk senin Technopat yazının yanına gelir. Çünkü p tagı sadece Technopat yazısını kapsar. Ve ortalamak için yeterli boşluğa sahip olamaz.

Display block ise, tüm satırı kaplar. Bu sayede hizalama ve ortalama işlemlerini kolayca yapabilirsiniz. Block'ta ise p tagından sonra yazı yazarsanız mecbur bir sonra ki satırda yazmış olursunuz.

Text align komutu. Tagın içindekileri hizalar. Margin ile de ortalama yapabilirsiniz. Bu yöntemde çerçeveyi yani p tagını ortalarsınız. Text align ile p tagının içindekileri.

Margin ile ortalamak için ise, margin-left= Auto ve margin-right: Auto'yu kullanabilirsiniz. Özeti sağa ve sola otomatik boşluk verdirtir. Marginin olayı. Çerçeve'nin dışına müdahale edebilmesidir. Padding ise çerçevenin içine müdahale eder. Yani border(çerçeve) ile yazdığın yazı arasında boşluk vermek istersen padding. Border'ın dışına bir boşluk işlemi yapacaksan margin.

Peki burada bir yazısının bulunduğu p etiketinin satır boşluğunun divin dışına taşmasını hangi komutla engelleyebilirim.

249873 · 4 Eylül 2023

kaygusuzronin dedi:
Peki burada bir yazısının bulunduğu p etiketinin satır boşluğunun divin dışına taşmasını hangi komutla engelleyebilirim.

Galiba margin: 0 verirsen sorun çözülür.

Tavsiyem projeye başlamadan önce. css dosyanın en tepesinde
*{
margin:0;
padding:0;
}

Kodunu yaz. Bu kod bütün elementlier. Default olarak gelen margin ve padding değerlerini sıfırlayacaktır.

kaygusuzronin · 4 Eylül 2023

mahmutxd07 dedi:
Galiba margin: 0 verirsen sorun çözülür.

Tavsiyem projeye başlamadan önce. CSS dosyanın en tepesinde.
*{
Margin: 0;
Padding: 0;
}

Kodunu yaz. Bu kod bütün elementlier. Default olarak gelen margin ve padding değerlerini sıfırlayacaktır.

Teşekkür ederim.

HTML vs CSS'te "text align" kodu yazılmasına rağmen yazı konumlandırılmıyor

AhmetKnKc

Megapat

kaygusuzronin

Centipat

249873

Kilopat

kaygusuzronin

Centipat

Dosya Ekleri

249873

Kilopat

kaygusuzronin

Centipat