Çözüldü CSS Yazı ortalama

redflu · 18 Şubat 2023

Merhaba arkadaşlar, tasarımcı olarak kendi sitemi kuruyorum fakat kodlama kısmında biraz takıldım. İki yazının da verdiğim Figma çizimindeki yerlerinde olmasını istiyorum. X ekseninde sayfanın tam ortasında ve yine kendi aralarında sağ ve solda ortalanmış olmalarını. Bunu margin ile yapabildim fakat o zaman responsive olmuyor. Daha farklı olarak flex-direction ve align-items denedim fakat başarılı olamadım. Bunu daha kolay nasıl halledebilirim?

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <style>
      body {
        font-family: 'Poppins', sans-serif;
        font-size: 36px;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="left">portfolio</div>
    <div class="right">about me</div>
    </body>
</html>

CSS:

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  background: conic-gradient(from 180deg, #fff, #000);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.left {
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}


.right {
  color: #fff;

}

8bitlikadadam · 18 Şubat 2023

Tam yazdığımda fark ettim ki kodların hepsi buradaymış her neyse

body'e height: 100% verirsen oluyor galiba. Telefondan baktığım için çok da şey edemedim.

oynozan · 18 Şubat 2023

HTML:

<div class="container">
    <div>
        <p>Sol Yazı</p>
    </div>
    <div>
        <p>Sağ Yazı</p>
    </div>
</div>

CSS:

.container {
    height:100vh;
    width:100vw;
    display:flex;
}
.container > div {
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

redflu · 18 Şubat 2023

oynozan dedi:

HTML:

<div class="container">
    <div>
        <p>Sol Yazı</p>
    </div>
    <div>
        <p>Sağ Yazı</p>
    </div>
</div>

CSS:

.container {
    height:100vh;
    width:100vw;
    display:flex;
}
.container > div {
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

Çok teşekkürler tam istediğim şey.

Çözüldü CSS Yazı ortalama

Ayrıntılı düzenleme

redflu

Hectopat

oynozan

8bitlikadadam

Megapat

oynozan

Megapat

redflu

Hectopat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz