Çö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;

}

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;
}

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