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

Charaa

Hectopat

William Crusader

Hectopat

voici cest moz

Hectopat

Charaa

Hectopat

William Crusader

Hectopat

Charaa

Hectopat

walter wick

Kilopat

William Crusader

Hectopat

Charaa

Hectopat

voici cest moz

Hectopat