中心徽标响应两类

问题描述：

我管理一个网站，其中有一个左对齐的徽标。中心徽标响应两类

为标志的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; 
}

是不正确的？

使用这种.landingpage.img-responsive.logo { 保证金：0汽车; } – San

答

要选择多类事件，删除类选择之间的空间：

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

margin: 0 auto;是中心，这是比它更小的容器元素的块级元素的好办法。但是，根据您的标记，您可能想要在父项上使用text-align: center;。

感谢您的评论。 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

谢谢你的评论.HTML应该仍然是：class =“landingpage img-responsive logo，对不对？ –

是的，但如果它不起作用，你可以检查一下其他css属性是否取消了这个。 – ElChapo

中心徽标响应两类

相关推荐