Не могу отцентрировать изображение в CSS - PullRequest
Новая
       33

Не могу отцентрировать изображение в CSS

0 голосов
/ 27 марта 2019

Мои изображения не будут в центре моей страницы. Они сосредоточены только на смартфонах, но не на ноутбуках. Как я могу это исправить? 

@media only screen and (MIN-width:240px) {

img {
    display: block;
    width: 100%;
    margin-left: auto 0;
    margin-right: auto 0;
}   
@media only screen and (min-width: 769px) {
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;

}
.main-container {
min-height: 100vh;
/* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px;
text-align: center;
/* height of your footer */

}

Ответы [ 2 ]

0 голосов
/ 27 марта 2019

Вы можете использовать flex. Оберните ваше изображение в div и используйте

display: flex; align-items: center; justify-content: center;

для этого div

Или используйте margin: 0 auto для изображения

0 голосов
/ 27 марта 2019

В вашем CSS-коде есть синтаксическая ошибка.Попробуйте это: 

@media only screen and (min-width:240px) {
  img {
      display: block;
      width: 100%;
      margin-left: auto 0;
      margin-right: auto 0;
  }
}

@media only screen and (min-width: 769px) {
  img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 40%;
  }

  .main-container {
    min-height: 100vh;
    overflow: hidden;
    display: block;
    position: relative;
    padding-bottom: 100px;
    text-align: center;
  }
}
 <html lang="da">  
   <meta charset="utf-8"> 
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
   <div class="main-container"> 
     <img src="https://via.placeholder.com/150" alt=forside>
   </div>
</html>
...