Çapraz solma görüntülerini hizalayın

HTML & css için çok yeni. Web siteme gezinen resimler eklemeye çalışıyorum. Bu başardım. Ancak, tüm resimlerimin aynı boyutta olmasını ve aynı zamanda ortalanmasını istiyorum. Herkes daha iyi olacak düğmeleri kullanarak görüntülerin nasıl değiştirileceğini bilirse.Çapraz solma görüntülerini hizalayın

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<style> 


body { 
    background-color: lightblue; 


} 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li { 
    float: left; 
} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover { 
    background-color: #111; 
} 


img { 
    position: absolute; 
    margin: 5px; 
    border: 1px solid #ccc; 
    width: 180px; 
} 


img img { 
    width: 100%; 
    height: auto; 


} 

      img:nth-of-type(1){ 
       -webkit-animation: fadeInOut 10s linear 6s infinite; 
      } 
      img:nth-of-type(2){ 
       -webkit-animation: fadeInOut 10s linear 4s infinite; 
      } 
      img:nth-of-type(3){ 
       -webkit-animation: fadeInOut 10s linear 2s infinite; 
      } 
      img:nth-of-type(4){ 
       -webkit-animation: fadeInOut 10s linear infinite; 
      } 

/* Keyframes - WebKit only ------------------------------------------ */ 


      @-webkit-keyframes fadeInOut{ 

      0% { opacity:1; } 
      17% { opacity:1; } 
      25% { opacity:0; } 
      92% { opacity:0; } 
      100% { opacity:1; } 

      } 

</style> 
</head> 
<title>Badass Burgers</title> 

<body> 



<ul> 
    <li><a class="active" href="info.php">About</a></li> 
    <li><a href="about.php">Team</a></li> 
    <li><a href="Menu.php">Menu</a></li> 
    <li><a href="contact.php">Contact Us</a></li> 

</ul> 
<img src='food1.jpg'> 
     <img src='Food2.jpg'align="middle"> 
     <img src='Food3.jpg' align="middle"> 
     <img src='food4.jpg'align="middle"> 


</body> 
</html>

kaynak

2016-04-03 chris

Tüm resimlerin aynı boyutta olmasını istiyorsanız, her bir görüntüde sabit bir genişlik ve yükseklik ayarlamanız gerekir.

Görüntüleri belirli bir kapsayıcıda ortalamak için, aşağıdaki CSS'yi kullanabilirsiniz.

<div class="image-wrapper"> 
    <img class="image" src='http://lorempixel.com/400/200/' width="200" height="175" /> 
</div>

.image-wrapper { 
    position: relative; 
    height: 500px; // change to whatever works for you 
} 

.image { 
    position: absolute; 
    top: 50%; 
    border: 1px solid #ccc; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
}

CSS bakın EXAMPLE

kaynak

2016-04-03 12:51:34 aphextwix

Çapraz solma görüntülerini hizalayın

cevap

İlgili konular