无法将图片放在CSS中

时间:2019-03-27 08:42:48

标签: css image responsive-design

我的图像不会在页面上居中。它们仅以智能手机为中心,而不是以笔记本电脑为中心。我该如何解决?

@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 :(得分:0)

您的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>

答案 1 :(得分:0)

您可以使用flex。将图片包装在div中并使用

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

为此div

或将margin: 0 auto用于图像