センターロゴ応答2クラス

Question

私は管理されたロゴが左揃えのサイトです。私はロゴがあるランディングページを作成する必要があり

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 
} 

：そのロゴの

HTMLとCSSは次のように探しています中心に置かれた。したがって、私はそうのように行うことができ、私のランディングページに考えた：

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> 

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

CSSが正しくないということでしょうか？

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

margin: 0 auto;はそれのコンテナ要素よりも小さいブロックレベル要素をセンタリングするための良い方法である：。、マルチクラスのイベントを選択し、クラスセレクタとの間のスペースを削除する

Answer 1

ただし、マークアップによっては、親にtext-align: center;を使用することもできます。

Answer 2

img-responsiveはクラスなので、.で使用する必要があります。あなたはこのようにスペースを削除する必要がありますので.img-responsiveと.logoと.landingpageは同じクラスである：0オート：

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

はelement element selectorとAnd selector