Question

私はページの右側にロゴがあります。サイズ変更（ウィンドウを小さくする）では、ロゴをページの中央に移動したいと思います。

はここにここに私のHTML

<div class="headerlogo" style=""> 
        <div class="social-nav"> 
         <a href='#'><img class="getapp-nav-img" src='img/logo.png'/></a> 
        </div> 
      </div> 

そのこれによって動いていないのです、私のCSS

.headerlogo { 
    position: relative; 
    float: right; 
    margin-right: 5%; 
    margin-top: 50px; 
    z-index: 999; 
} 

.getapp-nav-img{ 
    height: 60px; 
     margin: auto; 
} 

です。どうすればこれを達成できますか？

Answer 1

をあなたはこのようにメディアクエリを使用することができます。

.headerlogo { 
 
    width: 50px; 
 
    position: relative; 
 
    float: right; 
 
    margin: 50px 5% 0 auto; 
 
    z-index: 999; 
 
} 
 

 
.getapp-nav-img { 
 
    height: 60px; 
 
    margin: auto; 
 
} 
 

 
@media (max-width: 480px) { 
 
    .headerlogo { 
 
    float: none; 
 
    text-align: center; 
 
    margin: 50px auto 0 auto; 
 
    } 
 
}

<div class="headerlogo" style=""> 
 
    <div class="social-nav"> 
 
    <a href='#'><img class="getapp-nav-img" src='https://cdn0.iconfinder.com/data/icons/black-icon-social-media/256/099280-blinklist-logo.png'/></a> 
 
    </div> 
 
</div>

ここにはhttps://jsfiddle.net/ajjr3u3n/2/

Answer 2

floatを削除し、text-alignを使用してimgを中央に配置します。あなたはこのようなmedia query以内にそれらの変更を行う必要があります。jsFiddleへ

@media (max-width: 768px) { 
    .social-nav { 
     text-align: center; 
    } 
    .headerlogo { 
     float: none; 
    } 
} 

---

リンク：https://jsfiddle.net/AndrewL32/e0d8my79/108/