Resim ile yazı aynı hizaya nasıl alınır?

Maalesef yok hocam güncelledim linki.

CSS dosyanı bu kodlarla değiştirir misin ? Deneyip yazarsın. Yedeğini almayı unutma.
CSS:
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box
    
}

body{
  font-family: 'Oswald', sans-serif;
  background-color: black;
}
.header{
    
    background-color: black;
    width: 100%;
    background-position: center;
    background-size: cover;
    position: relative;
    
}

nav{
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
    
}

nav img{
    width: 150px;
}

.nav-links{
    flex: 1;
    text-align: right;
}

.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-links ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    text-transform: uppercase;
}

.nav-links ul li::after{
    content: '';
    width: 0%;
    height: 2px;
    background-color: #772b2b;
    display: block;
    margin: 5px auto;
    transition: 0.4s;
}

.nav-links ul li:hover::after{
    width: 100%;
}



nav .fas{
    display: none;
}



.topnav {
  background-color: #201c1c;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  transition: 0.6s;
 
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #772b2b;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav .active {
  background-color: #201c1c;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Slideshow container */
.slideshow-container {
    width: 100%;
    position: relative;
    margin: auto;
    
    
    
  }

 
 
  /* Hide the images by default */
  .mySlides {
    display: none;
  }
 
  /* Next & previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
 
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
 
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
  }
 
 
 
  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
 
  .active, .dot:hover {
    background-color: #717171;
  }
 
  /* Fading animation */
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
 
  @-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }
 
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }

/* Container holding the image and the text */
.container {
  position: relative;
 
}

.container img{
  width: 100%;
}

/* Bottom right text */
.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: rgba(0,0,0,0.5);
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 750px){
    

    .nav-links ul li {
        display: block;
    }

    .nav-links{
        position: absolute;
        background-color: #772b2b;
        height: 100vh;
        width: 200px;
        top: 0px;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
        height: 280px;
    }

    nav .fas{
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }

    nav img{
        width: 120px;
    }
}

.bilgi{
  color: #fff;
  margin-top: 50px;
  margin-left: 15px;
  font-size: 18px;
}

.bilgi h1{
  font-size: 32px;
  margin-bottom: 30px;
 
}

.video{
  float:right;
  padding:0 10px 10px 30px;
  width: 40%;
}

.yazı{
  color: #fff;
  margin-top: 160px;
  margin-left: 80px;
  font-size: 15px;
}

.genel-col {
  width: 550px;
}

.genel-col img{
  width: 550px;
 
 
}

.genel-col a{
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  transition: 0.6s;
}

.genel-col a:hover{
  color: #2196FE;
}

.solbaslık, .solyazı, .solbtn{
    
}

.genelbakıs  {
    display: grid;
    color: #fff;
    grid-template-columns: 1fr 1fr;
    margin-top: 50px;
    grid-gap: 3em;
    overflow: hidden;
    
  
}

.solresım{
}

@media only screen and (max-width: 1200px){
  .genel-col {
  width: 400px;
}
  .genel-col img{
    width: 400px;
  }

}

@media only screen and (max-width: 950px){
  .genel-col {
  width: 300px;
}
  .genel-col img{
    width: 300px;
  }

}

@media only screen and (max-width: 700px){
    .genelbakıs{
      grid-template-columns: 1fr;
    }

    
}


.bayı{
  margin: 100px auto;
  width: 80%;
  background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)),url(../img/bayı.jpg);
  height: 350px;
  background-size: cover;
  border-radius: 8px;
  padding: 10px 0px;
 
}

.bayı h1{
  color: #fff;
  margin-bottom: 15px;
  padding: 10px;
  margin-left: 120px;
 
}



a.btn{
  position: relative;
  padding: 10px 30px;
  margin: 0 15px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 20px;
  transition: 0.5s;
  overflow: hidden;
  margin-left: 180px;
}

a.btn:hover{
  background: #772b2b;
  color: #111;
  box-shadow: 0 0 50px #772b2b;
  transition-delay: 0.5s;
}

a.btn:before{
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #772b2b;
  border-left: 2px solid #772b2b;
  transition: 0.5s;
  transition-delay: 0.5s;
}

a.btn:hover:before{
  width: 100%;
  height: 100%;
  transition-delay: 0s;
}

a.btn::after{
  content: '';
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #772b2b;
  border-right: 2px solid #772b2b;
  transition: 0.5s;
  transition-delay: 0.5s;
}

a.btn:hover:after{
  width: 100%;
  height: 100%;
  transition-delay: 0s;
}
 
CSS dosyanı bu kodlarla değiştirir misin? Deneyip yazarsın. Yedeğini almayı unutma.
CSS:
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

* {
 margin: 0px;
 padding: 0px;
 box-sizing: border-box

}

body{
 font-family: 'Oswald', sans-serif;
 background-color: black;
}
.header{

 background-color: black;
 width: 100%;
 background-position: center;
 background-size: cover;
 position: relative;

}

nav{
 display: flex;
 padding: 2% 6%;
 justify-content: space-between;
 align-items: center;

}

nav img{
 width: 150px;
}

.nav-links{
 flex: 1;
 text-align: right;
}

.nav-links ul li{
 list-style: none;
 display: inline-block;
 padding: 8px 12px;
 position: relative;
}

.nav-links ul li a{
 color: #fff;
 text-decoration: none;
 font-size: 15px;
 text-transform: uppercase;
}

.nav-links ul li::after{
 content: '';
 width: 0%;
 height: 2px;
 background-color: #772b2b;
 display: block;
 margin: 5px auto;
 transition: 0.4s;
}

.nav-links ul li:hover::after{
 width: 100%;
}

nav .fas{
 display: none;
}

.topnav {
 background-color: #201c1c;
 overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
 float: left;
 display: block;
 color: #f2f2f2;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 font-size: 17px;
 transition: 0.6s;

}

/* Change the color of links on hover */
.topnav a:hover {
 background-color: #772b2b;
 color: black;
}

/* Add an active class to highlight the current page */
.topnav .active {
 background-color: #201c1c;
 color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
 display: none;
}

/* Slideshow container */
.slideshow-container {
 width: 100%;
 position: relative;
 margin: auto;

 }

 /* Hide the images by default */
 .mySlides {
 display: none;
 }

 /* Next & previous buttons */
 .prev, .next {
 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 margin-top: -22px;
 padding: 16px;
 color: white;
 font-weight: bold;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
 user-select: none;
 }

 /* Position the "next button" to the right */
 .next {
 right: 0;
 border-radius: 3px 0 0 3px;
 }

 /* On hover, add a black background color with a little bit see-through */
 .prev:hover, .next:hover {
 background-color: rgba(0,0,0,0.8);
 }

 /* The dots/bullets/indicators */
 .dot {
 cursor: pointer;
 height: 15px;
 width: 15px;
 margin: 0 2px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;
 }

 .active, .dot:hover {
 background-color: #717171;
 }

 /* Fading animation */
 .fade {
 -webkit-animation-name: fade;
 -webkit-animation-duration: 1.5s;
 animation-name: fade;
 animation-duration: 1.5s;
 }

 @-webkit-keyframes fade {
 from {opacity: .4}
 to {opacity: 1}
 }

 @keyframes fade {
 from {opacity: .4}
 to {opacity: 1}
 }

/* Container holding the image and the text */
.container {
 position: relative;

}

.container img{
 width: 100%;
}

/* Bottom right text */
.text-block {
 position: absolute;
 bottom: 20px;
 right: 20px;
 background-color: rgba(0,0,0,0.5);
 color: white;
 padding-left: 20px;
 padding-right: 20px;
}

@media (max-width: 750px){

 .nav-links ul li {
 display: block;
 }

 .nav-links{
 position: absolute;
 background-color: #772b2b;
 height: 100vh;
 width: 200px;
 top: 0px;
 right: -200px;
 text-align: left;
 z-index: 2;
 transition: 1s;
 height: 280px;
 }

 nav .fas{
 display: block;
 color: #fff;
 margin: 10px;
 font-size: 22px;
 cursor: pointer;
 }

 nav img{
 width: 120px;
 }
}

.bilgi{
 color: #fff;
 margin-top: 50px;
 margin-left: 15px;
 font-size: 18px;
}

.bilgi h1{
 font-size: 32px;
 margin-bottom: 30px;

}

.video{
 float:right;
 padding:0 10px 10px 30px;
 width: 40%;
}

.yazı{
 color: #fff;
 margin-top: 160px;
 margin-left: 80px;
 font-size: 15px;
}

.genel-col {
 width: 550px;
}

.genel-col img{
 width: 550px;

}

.genel-col a{
 color: #fff;
 font-size: 15px;
 text-decoration: none;
 transition: 0.6s;
}

.genel-col a:hover{
 color: #2196FE;
}

.solbaslık, .solyazı, .solbtn{

}

.genelbakıs {
 display: grid;
 color: #fff;
 grid-template-columns: 1fr 1fr;
 margin-top: 50px;
 grid-gap: 3em;
 overflow: hidden;

}

.solresım{
}

@media only screen and (max-width: 1200px){
 .genel-col {
 width: 400px;
}
 .genel-col img{
 width: 400px;
 }

}

@media only screen and (max-width: 950px){
 .genel-col {
 width: 300px;
}
 .genel-col img{
 width: 300px;
 }

}

@media only screen and (max-width: 700px){
 .genelbakıs{
 grid-template-columns: 1fr;
 }

}

.bayı{
 margin: 100px auto;
 width: 80%;
 background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)),url(../img/bayı.jpg);
 height: 350px;
 background-size: cover;
 border-radius: 8px;
 padding: 10px 0px;

}

.bayı h1{
 color: #fff;
 margin-bottom: 15px;
 padding: 10px;
 margin-left: 120px;

}

a.btn{
 position: relative;
 padding: 10px 30px;
 margin: 0 15px;
 color: #fff;
 text-decoration: none;
 text-transform: uppercase;
 letter-spacing: 2px;
 font-size: 20px;
 transition: 0.5s;
 overflow: hidden;
 margin-left: 180px;
}

a.btn:hover{
 background: #772b2b;
 color: #111;
 box-shadow: 0 0 50px #772b2b;
 transition-delay: 0.5s;
}

a.btn:before{
 content: '';
 position: absolute;
 top: 0px;
 left: 0px;
 width: 10px;
 height: 10px;
 border-top: 2px solid #772b2b;
 border-left: 2px solid #772b2b;
 transition: 0.5s;
 transition-delay: 0.5s;
}

a.btn:hover:before{
 width: 100%;
 height: 100%;
 transition-delay: 0s;
}

a.btn::after{
 content: '';
 position: absolute;
 bottom: 0px;
 right: 0px;
 width: 10px;
 height: 10px;
 border-bottom: 2px solid #772b2b;
 border-right: 2px solid #772b2b;
 transition: 0.5s;
 transition-delay: 0.5s;
}

a.btn:hover:after{
 width: 100%;
 height: 100%;
 transition-delay: 0s;
}

Teşekkür ederim hocam bunları nasıl ortalayabilirim?
 
Neleri ortalamak?
1623579779668.png

Bunları hocam küçüldüğünde de her zaman ortalanmasını istiyorum.
 
Uyarı! Bu konu 5 yıl önce açıldı.
Muhtemelen daha fazla tartışma gerekli değildir ki bu durumda yeni bir konu başlatmayı öneririz. Eğer yine de cevabınızın gerekli olduğunu düşünüyorsanız buna rağmen cevap verebilirsiniz.

Technopat Haberler

Geri
Yukarı