Move Logo von rechts nach rechts Html CSS

-1

Ich habe ein Logo auf der rechten Seite der Seite. Bei der Größenanpassung (verkleinertes Fenster) möchte ich das Logo in die Mitte der Seite verschieben.Move Logo von rechts nach rechts Html CSS

Hier ist meine CSS

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

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

Hier ist mein HTML

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

Sein nicht durch diese bewegt. Wie kann ich das erreichen?

Quelle

2016-05-25 Abhishek

eine Medienabfrage – winresh24

den Haltepunkt angeben, dementsprechend kann man dasselbe vorschlagen, mit 'media' Abfrage. – Shashank

@Abhishek bitte überprüfen Sie meine Snippet-Antwort und zeigen Sie auf der ganzen Seite und überprüfen Sie reagieren. – Jainam

Sie können Medien Abfragen wie folgt verwendet werden:

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

Hier ist ein Geige für einfacheres Testen: https://jsfiddle.net/ajjr3u3n/2/

Quelle

2016-05-25 08:47:56 thepio

bei der Verwendung dieses Logos bewegt sich nach links auf der Größe ändern und nicht in der Mitte – Abhishek

@Abhishek Überprüfen Sie die aktualisierte Antwort und jsfiddle ich gepostet. –

@Abhishek bist du sicher? Zumindest funktioniert es für mich in der Geige und auch im Snippet. Nicht sicher, ob es etwas gibt, das ich von deinem css oder von HTML vermisse. – thepio

Entfernen Sie den Schwimmer und verwenden Sie text-align, um das IMG zu zentrieren. Sie müssen diese Änderungen innerhalb eines media query so machen:

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

Link zu jsFiddle: https://jsfiddle.net/AndrewL32/e0d8my79/108/

Quelle

2016-05-25 08:46:11

Move Logo von rechts nach rechts Html CSS

Antwort

Verwandte Themen