当视口(viewport)为 320 像素时,我试图将 img
居中。我尝试过使用不同的方法,但似乎没有任何效果。
.logo {
width: 55px;
height: 55px;
margin: 10px 0 10px 30px;
float: left;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
header {
height: 300px;
}
.logo {
width: 55px;
height: 55px;
clear: both;
padding: 0;
margin: 0;
margin-left: 50%;
margin-right: -50%;
}
}
<header>
<img class="logo" src="img/logo.png" alt="">
<nav id="main_menu">
<ul class="menu">
<a href="index.html"><li>Home</li></a>
<a href="how-it-works.html"><li>How It Work</li></a>
<a href="learn-more.html"><li>Learn More</li></a>
<a href="feed.html"><li>Student Feed</li></a>
<a href="contact.html"><li>Contact Us</li></a>
</ul>
</nav>
</header>
最佳答案
你这边的愚蠢错误。它确实有效。你忘了右括号。然而,另一种方法是使用 float: right
和 margin-right: 50% - image-width
CSS
.logo {
width: 55px;
height: 55px;
margin: 10px 0 10px 30px;
float: left;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
header {
height: 300px;
}
.logo {
float:right;
width: 55px;
height: 55px;
clear: both;
padding: 0;
margin-right: calc(50% - 55px);
}
}
HTML
<header>
<img class="logo" src="img/logo.png" alt="">
<nav id="main_menu">
<ul class="menu">
<a href="index.html"><li>Home</li></a>
<a href="how-it-works.html"><li>How It Work</li></a>
<a href="learn-more.html"><li>Learn More</li></a>
<a href="feed.html"><li>Student Feed</li></a>
<a href="contact.html"><li>Contact Us</li></a>
</ul>
</nav>
</header>
关于html - 媒体查询图像定位问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36750527/