CSS text-align çalışmıyor

Charaa · 2 Nisan 2023

Kodlama hakkında bilgim yok. Kafam esti ödev için kağıda kartona yapmayayım basit bir site yapayım dedim. Video izleyerek yapıyordum. Ama ne yaparsam yapayım yazıyı ortalayamıyorum.

*{
margin: 0;
padding: 0;
}
.container{
background: url(bg.jpg);
height: 100vh;
background-size: 100% 100%;

}
.container .navbar{
width: 100%;
height: 80px;
background: rgba(0, 0, 0, 0.426);
}
.navbar .logo{
display: inline-block;
margin-left: 50px;
margin-top: 20px;
}
.navbar .logo {
text-decoration: none;
font-size: 30px;
font-family: sans-serif;
color: #f3f3f3;
}
.navbar ul{
float: right;
margin-right: 20px;

}
.navbar ul li{
list-style: none;
display: inline-block;
margin: 0 8px;
line-height: 80px;
}
.navbar ul li {
color: white;
text-decoration: none;
font-size: 20px;
padding: 6px 13px;
font-family: sans-serif;

}
.container .center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-family: sans-serif;
user-select: none;
}
.center h1{
color: white;
font-size: 60px;
font-weight: bold;
width: 900px;
text-align: center;
}
.center h2{
color: #ffffff57;
font-size: 40px;
font-weight: bold;
width: 885px;
text-align: center;
margin-top: 15px;
display: inline-block;
margin-bottom: 300px;

}

a{
color: white;
text-decoration: none;
background-color: white;
padding: 20px;
width: 280px;
color: black;
text-align: center;
font-size: 18px;
text-decoration: none;
border-radius: 56px;
transition: all .25s ease-in;
display: inline-block;
display: flex;
justify-content: center;
margin-top: 48px;
column-gap: 16px;

Ortalamaya çalıştığım yazılar link olanlar:

<a href="#">All Irregular Verbs</a>
<a href="#">Irregular Verbs Oyunu</a>

William Crusader · 2 Nisan 2023

Kolay yoldan yapmak isterseniz;
İki link için de bir id verin ve şunları kullanın:

Kod:

position: absolute;
top: [yukarıya uzaklığı ayarlayın]
left: [sola uzaklığı ayarlayın]

voici cest moz · 2 Nisan 2023

.container > a ile deneyebilirsiniz.

Charaa · 2 Nisan 2023

William Crusader dedi:
Kolay yoldan yapmak isterseniz;
İki link için de bir id verin ve şunları kullanın:

Kod:

position: absolute; top: [yukarıya uzaklığı ayarlayın] left: [sola uzaklığı ayarlayın]

Hocam ben de onu yapmaya çalıştım. Bunu görmeden önce denemiştim ve olmuştu. Fakat dediğim gibi kodlama hakkında bilgim yok. Farklı gruplandırmayı bilmiyorum .<div> ile yapmaya çalıştım. Öyle yapınca da linklere tıklanmadı. (<div class="x"> şeklinde yapmıştım.)

voici cest moz dedi:
.container > a ile deneyebilirsiniz.

Hocam cahilliğime verin de ne dediğinizi anlamadım.

@William Crusader hocam id verdim şu anda "bir" ve "iki" şeklinde. Bunları style.css de nasıl yazıcam. Örneğin ''.container bir'' şeklinde mi ?

William Crusader · 2 Nisan 2023

Hayır. #bir #iki şeklinde.

Charaa · 2 Nisan 2023

Hocam anlamadım niye ama ''position: absolute;'' yazınca linkler çalışmıyor.

walter wick · 2 Nisan 2023

Charaa dedi:
Hocam anlamadım niye ama "position: Absolute;" yazınca linkler çalışmıyor.

Kodları temiz bir şekilde atar mısın?

William Crusader · 2 Nisan 2023

Charaa dedi:
Hocam anlamadım niye ama ''position: absolute;'' yazınca linkler çalışmıyor.

position: absolute; elementin yerini istediğiniz yere koyabilmenize yarar. Sizin sorununuzu anlamadım.

Charaa · 2 Nisan 2023

Kod:

<!DOCTYPE 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>English Irregular Verbs</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>



<div class="container">

    <div class="navbar">

        <div class="logo">

            İngilizce Performans Ödevi

        </div>

        <ul>

            <li>x</li>

            <li>y</li>

        </ul>

    </div>
    <a id="bir" href="#">All Irregular Verbs</a>
    <a id="iki" href="#">Irregular Verbs Oyunu</a>


    <div class="center">

        <h1>English Irregular Verbs</h1>

        <h2>HOŞGELDİNİZ</h2>

    </div>

</div>


</body>

</html>

Kod:

*{
    margin: 0;
    padding: 0;
}

.container{
    background: url(bg.jpg);
    height: 100vh;
    background-size: 100% 100%;
 
}

.container .navbar{
width: 100%;
height: 80px;
background: rgba(0, 0, 0, 0.426);
}

.navbar .logo{
    display: inline-block;
    margin-left: 50px;
    margin-top: 20px;
}

.navbar .logo {
    text-decoration: none;
    font-size: 30px;
    font-family: sans-serif;
    color: #f3f3f3;
}

.navbar ul{
    float: right;
    margin-right: 20px;
 
}

.navbar ul li{
    list-style: none;
    display: inline-block;
    margin: 0 8px;
    line-height: 80px;

}
.navbar ul li {
    color: white;
    text-decoration: none;
    font-size: 20px;
    padding: 6px 13px;
    font-family: sans-serif;
 
}

.container .center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-family: sans-serif;
    user-select: none;

}

.center h1{
    color: white;
    font-size: 60px;
    font-weight: bold;
    width: 900px;
    text-align: center;
}

.center h2{
    color: #ffffff57;
    font-size: 40px;
    font-weight: bold;
    width: 885px;
    text-align: center;
    margin-top: 15px;
    display: inline-block;
    margin-bottom: 300px;
 
}



#bir {
    color: white;
    text-decoration: none;
    background-color: white;
    padding: 20px;
    width: 280px;
    color: black;
    font-size: 18px;
    text-decoration: none;
    border-radius: 56px;
    transition: all .25s ease-in;
    display: inline-block;
    display: flex;
    justify-content: center;
    margin-top: 48px;
    column-gap: 16px;
 
 
}

#iki{


color: white;
text-decoration: none;
background-color: white;
padding: 20px;
width: 280px;
color: black;
font-size: 18px;
text-decoration: none;
border-radius: 56px;
transition: all .25s ease-in;
display: inline-block;
display: flex;
justify-content: center;
margin-top: 48px;
column-gap: 16px;


}

Birinci index.html ikincisi style.css

William Crusader dedi:
position: absolute; elementin yerini istediğiniz yere koyabilmenize yarar. Sizin sorununuzu anlamadım.

Hocam sanırım sorunu anladım. Ben ortadaki yazıyı non select olarak ayarlamıştım. Ortaya alınca da tıklanmıyor linklere. Edit: alakası yokmuş.

Hocam ne alaka bilmiyorum ortadayken linklere tıklanmıyor. Ortada aşağı koyuyorum tıklanıyor.

voici cest moz · 2 Nisan 2023

Charaa dedi:
Hocam cahilliğime verin de ne dediğinizi anlamadım

Hocam "a" tagine özellik eklerken CSS'te tag a değil ".container > a" ile ile çağırın çünkü a elemanınız "container" IDli div içinde
Yani şu şekilde

.container > a{
color: white;
Text-decoration: None;
Background-color: White;
Padding: 20px;
Width: 280px;
Color: Black;
Text-align: Center;
Font-size: 18px;
Text-decoration: None;
Border-radius: 56px;
Transition: All. 25s ease-in;
Display: İnline-block;
Display: Flex;
Justify-content: Center;
Margin-top: 48px;
Column-gap: 16px;

Son olarak şunu da ekleyeyim. CSS yazarken illa external yani başka bir dosya üzerinden kod yazmanıza gerek yok. Sizin sorununuzu inline CSS'te çözebilir.

Örnek: <a style="CSS kodlarınız">#</a>
Bu şekilde yazdığınız kodlar sadece bu eleman için geçerli olacaktır iki çözümü de deneyin olmazsa daha detalı yazacağım.

CSS text-align çalışmıyor

Ayrıntılı düzenleme

Charaa

Hectopat

William Crusader

Hectopat

voici cest moz

Decapat

Charaa

Hectopat

William Crusader

Hectopat

Charaa

Hectopat

walter wick

Hectopat

William Crusader

Hectopat

Charaa

Hectopat

voici cest moz

Decapat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz