center logo responsive zwei klassen

Question

I administrative eine seite, wo es ein logo gibt, das links ausgerichtet ist.

Die HTML und CSS für das Logo ist auf der Suche wie folgt aus:

HTML

<div class="logo-container"> 
     <a href="@homePage.Url"> 
      <img src="/img/logo-white.svg" data-svg-fallback="/img/logo-white.png" alt="@logoAltText" class="img-responsive logo"/> 
     </a> 
    </div> 

CSS

@mixin img-responsive($display: block) { 
    display: $display; 
    max-width: 100%; // Part 1: Set a maximum relative to the parent 
    height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching 
} 

Ich habe eine Landingpage zu machen, wo das Logo zentriert. Deshalb dachte ich, meine Landingpage auf mich wie so tun konnte:

HTML

<div class="logo-container"> 
    <a href="@homePage.Url"> 
     <img src="/img/logo-white.svg" data-svg-fallback="/img/logo-white.png" alt="@logoAltText" class="landingpage img-responsive logo"/> 
    </a> 
</div> 

CSS

.landingpage img-responsive logo { 
    margin: 0 auto; 
} 

ist, dass nicht richtig?

Answer 1

Um ein Multi-Class-Ereignis auswählen, die Räume zwischen den Klassen-Selektoren entfernen:

.landingpage.img-responsive.logo { 
    margin: 0 auto; 
} 

margin: 0 auto; ein guter Weg ist, ein Element auf Blockebene zu zentrieren, die kleiner ist als Containerelement ist. Abhängig von Ihrem Markup möchten Sie möglicherweise text-align: center; auf dem Eltern verwenden.

Answer 2

img-responsive ist eine Klasse, daher müssen Sie sie mit einer . verwenden. .img-responsive und .logo und .landingpage in der gleichen Klasse sind, so dass Sie Raum wie diese entfernen sollen:

.landingpage.img-responsive.logo{ 
margin: 0 auto; 
} 

die element element selector und die diese .landingpage.img-responsive.logo And selector