Блог

Главная - Вопросы по программированию - элементы div располагаются слева вверху и не центрируются при увеличении HTML/CSS

элементы div располагаются слева вверху и не центрируются при увеличении HTML/CSS

#html #css

Вопрос:

У меня возникают трудности с центрированием фона или изображений при увеличении масштаба. Все центрируется, когда я уменьшаю масштаб, потому что я устанавливаю * at 1200px . Но когда я увеличиваю масштаб, POV масштабируется с левой стороны фона.

Вот пример моего POV, когда он увеличен:

[https://imgur.com/a/gF50dhh][1]

Вот мой код:

 *{
    width: 1200px;
    margin: 0 auto;
    padding: 0;
}
html {
    background-color: #0f1011;
    text-align: center;
    font-size: 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    position: relative;
    min-height: 100%;
    margin: 0 auto;
}

/*NAVIGATION BAR*/

.nav {
    padding: 20px;
    background-color: #a91817;
    font-size: 21px;
    margin:0 auto;
}
.navbarmargin {
    margin: 0 auto;
}
.product {
    font-family: 'Zen Dots';
    font-size: 15px;
    display: flex;
    float: left;
}

/*NAVIGATION BAR ELEMENT*/
.homee {
    text-decoration: none;
    font-family: 'Alatsi';
    color: #f7f8f9;
    transition: 500ms ease-in-out;
    margin-left:30px;
    margin-right:30px;
}
.homee:hover {
    color: #292f31;
    padding-top: 20px;
    padding-bottom: 20px;
}




.memberss {
    text-decoration: none;
    font-family: 'Alatsi';
    color: #f7f8f9;
    transition: 500ms ease-in-out;
    margin-left:30px;
    margin-right:30px;
}
.memberss:hover {
    color: #292f31;
    padding-top: 20px;
    padding-bottom: 20px;

}



.socialss{
    text-decoration: none;
    font-family: 'Alatsi';
    color: #f7f8f9;
    transition: 500ms ease-in-out;
    margin-left:30px;
    margin-right:30px;
}
.socialss:hover {
    color: #292f31;
    padding-top: 20px;
    padding-bottom: 20px;
}


.contactt {
    text-decoration: none;
    font-family: 'Alatsi';
    color: #f7f8f9;
    transition: 500ms ease-in-out;
    margin-left:30px;
    margin-right:30px;
}
.contactt:hover {
    color: #292f31;
    padding-top: 20px;
    padding-bottom: 20px;
}

/*BANNER*/
.banner {
    background-image: url("https://cdn.discordapp.com/attachments/868146365014876250/868702765906526239/dwwdwdw.jpg");
    padding: 45px;
    object-fit: contain;
    display: block;
    margin:0 auto;
}

.logo1 {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin:auto;
    display: block;
    border-radius: 10px;
    width: 150px;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}

.jawbreaker {
    font-family: 'Zen Dots';
    font-size: 25px;
    color: red;
}
.jawbreaker1 {
    font-family: 'Zen Dots';
    font-size: 25px;
    color: cyan;
}

.sugarrush {
    padding: 25px;
    background-color: #45b5b5;
    display: block;
    margin:0 auto;

}
.sugarrushh {
   font-family: 'Lobster';
   text-shadow: 2px 2px 4px #000000;
   text-decoration: none;
   font-size:25px;
   color: whitesmoke;
   

   transition: 1000ms ease-in-out;
 }
 .sugarrushh:hover {
     font-size: 30px;
     color: rgb(245, 88, 179)
 }
 
 
 body {
    text-align: center;
    
}
.aboutt {
    width: 1024px;
    background-color: #414849;
    text-align: center;
    display: block;
    border-radius: 5px;
    margin-top: 10px;
    margin:0 auto;
    margin-right: 20px;
    margin-left: 20px;
    width: 960px;
}
#About {
    background-color: #141414;
    padding: 100px;
    margin:0 auto;
} 
 <!DOCTYPE html>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="body.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Alatsiamp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen Dotsamp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobsteramp;display=swap" rel="stylesheet">

<html lang="en">
    <head>
        <title>Jawbreaker SMP</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <div class="nav">
           <nav>
               <a href="#Home" class="homee">Home</a> 
               <a href="#Members" class="memberss">Members</a>
               <a href="#Socials" class="socialss">Socials</a> 
               <a href="#Contact" class="contactt">Contact</a> 
           </nav>
           </div>
          <div class="banner">
            <picture>
              <source srcset="https://cdn.discordapp.com/attachments/552032784890331155/867288559429615636/jawbreakerlogo.png" type="image/webp">
              <source srcset> 
              <img class="logo1" alt="Logo" src=""> <br> <br> <br>
           </picture>
           <span class="jawbreaker">Jaw</span>
           <span class="jawbreaker1">Breaker</span>
          </div>
          <div class="sugarrush">
            <a href="https://media1.tenor.com/images/e71c8574914d2cabb2c6c4bd9ad3af28/tenor.gif" class="sugarrushh">
            Let The Sugar Rush Begin!</a>
          </div>
</head> 
<body>
  <section id="About">
    <div class="aboutt">
      <h3>h</h3>
    </div>
  </section>

</body>
</html>

Ответ №1:

Это связано с тем, что у вас фиксированная ширина, попробуйте заменить 1200px 100% ее на эту, это поможет, но не решит проблему. Для этого я рекомендую вам использовать BOOTSTRAP, очень простой в реализации, просто добавьте строку CDN, и она будет работать нормально. И вы можете начать здесь учебники по начальной загрузке, это поможет сделать дизайн страницы совместимым со всеми устройствами.

Комментарии:

1. Спасибо! Я буду с нетерпением ждать загрузки

Метки: