我的图像不会在页面上居中。它们仅以智能手机为中心,而不是以笔记本电脑为中心。我该如何解决?
@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 */
}
答案 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
用于图像