Shawn.o Shawn.o - 2 years ago 86
HTML Question

media query image positioning problems

I'm trying to center a

when the viewport is 320px. I've tried using different method but nothing seems to work.

.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%;

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

Answer Source

Try to this if you want it in the middle of the screen :)

position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;

Othewise just remove top and bottom if you just want it horizontal.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download