0
Kayıt Ol

CSS Yazı Hizalama Yardım

11

●

116

  • 08-11-2022, 18:29:26
    #1
    canbudak99
    canbudak99
    arkadaşlar merhaba. Aşağıda We diye başlayan yeri üstteki logoya nasıl yaklaştırabilirim ? Değerleri girdim fakat yapamadım. Böyle çirkin oldu
  • 08-11-2022, 18:35:03
    #2
    Lumidee
    Lumidee
    bottom yada top margin ayarlarını değiştirin
  • 08-11-2022, 18:38:05
    #3
    canbudak99
    canbudak99
    Lumidee adlı üyeden alıntı: mesajı görüntüle
    bottom yada top margin ayarlarını değiştirin
    header h1 {
    color: #282a35;
    font-size: 4.5rem;
    margin-top: 0.1rem;
    }

    bu şekilde ama değişmiyor hocam.

    header {
    background-color: #fff4a3;
    height: 700px;
    padding-top: calc(50px + 0.1rem);
    text-align: center;

    burası da header kısmı.

    .img-fluid {
    max-width: 400px;
    height: auto;
    }

    burasıda logo. Anlamadım valla.
  • 08-11-2022, 18:38:57
    #4
    ncinar
    ncinar
    Dış div için position:relative
    yazı için position:absolute yaptıktan sonra top ve left değerlerini vermen yeterli olur.
    yada margin-top değerini - vermen lazım bu olmayabilir.
  • 08-11-2022, 18:48:05
    #5
    canbudak99
    canbudak99
    ncinar adlı üyeden alıntı: mesajı görüntüle
    Dış div için position:relative
    yazı için position:absolute yaptıktan sonra top ve left değerlerini vermen yeterli olur.
    yada margin-top değerini - vermen lazım bu olmayabilir.
    dış div dediğin yer tam olarak neresi oluyor hocam ?
  • 08-11-2022, 18:50:47
    #6
    ncinar
    ncinar
    header h1 {
    color: #282a35;
    font-size: 4.5rem;
    position:absolute;
    left:%40 yada
    left: calc(%50 - 100px) 100px değeri yazının width kadar
    top:200px;
    }

    bu şekilde ama değişmiyor hocam.

    header {
    position:relative
    background-color: #fff4a3;
    height: 700px;
    padding-top: calc(50px + 0.1rem);
    text-align: center;

    burası da header kısmı.

    .img-fluid {
    position:absolute
    top:150px;
    max-width: 400px;
    height: auto;
    }
    Yukarda relative ve absolute kullandım deneyebilirsiniz.
  • 08-11-2022, 18:57:14
    #7
    canbudak99
    canbudak99
    ncinar adlı üyeden alıntı: mesajı görüntüle
    header h1 {
    color: #282a35;
    font-size: 4.5rem;
    position:absolute;
    left:%40 yada
    left: calc(%50 - 100px) 100px değeri yazının width kadar
    top:200px;
    }

    bu şekilde ama değişmiyor hocam.

    header {
    position:relative
    background-color: #fff4a3;
    height: 700px;
    padding-top: calc(50px + 0.1rem);
    text-align: center;

    burası da header kısmı.

    .img-fluid {
    position:absolute
    top:150px;
    max-width: 400px;
    height: auto;
    }
    Yukarda relative ve absolute kullandım deneyebilirsiniz.
    Hocam header h1 {
    color: #282a35;
    font-size: 4.5rem;
    position: absolute;
    left: 32%;
    top: 350px;

    }

    yazdım oldu. Diğer dediklerinizi uygulamadım. Bu şekilde tam ortaladım yazıyı.
  • 08-11-2022, 19:02:14
    #8
    ncinar
    ncinar
    canbudak99 adlı üyeden alıntı: mesajı görüntüle
    Hocam header h1 {
    color: #282a35;
    font-size: 4.5rem;
    position: absolute;
    left: 32%;
    top: 350px;

    }

    yazdım oldu. Diğer dediklerinizi uygulamadım. Bu şekilde tam ortaladım yazıyı.
    Burda sorun olmaz hocam ama responsive yaptığınızda top:350 çok gelebilir. "%" ile ççalışmanız gerekebilir yada responsive'de
    @media media-type (media-feature){
    /*Styles go here*/
    }
    içerisinde yaparsanız sizin için iyi olur
  • 08-11-2022, 19:20:40
    #9
    mustafasatirogl
    mustafasatirogl
    Kapsayıcı divin class'ına CSS ile display:flex; flex-direction:column; gap:10px ver olsun bitsin☺️