中心徽標響應兩類

我管理一個網站，其中有一個左對齊的徽標。中心徽標響應兩類

爲標誌的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="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 
}

我不得不做出的LandingPage標識被居中。所以我覺得在我的LandingPage我能做到像這樣：

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

是不正確的？

來源

2016-08-17 Ne Kr

使用這種.landingpage.img-responsive.logo { 保證金：0汽車; } – San

要選擇多類事件，刪除類選擇之間的空間：

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

margin: 0 auto;是中心，這是比它更小的容器元素的塊級元素的好辦法。但是，根據您的標記，您可能想要在父項上使用text-align: center;。

來源

2016-08-17 15:11:50 andreas

感謝您的評論。 HTML仍然應該是：class =「landingpage img-responsive logo，right？ –

它仍然不能正常工作，所以也許會有一些繼承。是否可以創建一個新的標誌img，然後使用我的css來做這件事？我只是在同一個類中的徽標周圍設置了一個邊框，並且這樣很好，但徽標仍然沒有居中。 –

是的，在HTML屬性中，類是空間分隔的'class =「landingpage img-responsive logo」。爲了真正幫助你並找出問題，我們需要看到一個帶有整個標記的示例頁面 – andreas

img-responsive是一個類，因此您必須將它與.一起使用。 .img-responsive和.logo和.landingpage是在同一個班，所以你應該像這樣除去空間：

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

見element element selector和And selector

來源

2016-08-17 15:25:21 ElChapo

謝謝你的評論.HTML應該仍然是：class =「landingpage img-responsive logo，對不對？ –

是的，但如果它不起作用，你可以檢查一下其他css屬性是否取消了這個。 – ElChapo

中心徽標響應兩類

回答

相關問題