Question

我管理的网站上有一个左对齐的徽标。

该徽标的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。因此，我在登陆页面上认为我可以这样做：

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

是不正确的？

Answer 1

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

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

margin: 0 auto;是一个使块级元素居中的好方法，它比它的容器元素小。但是，根据您的标记，您可能希望在父级上使用text-align: center;。

Answer 2

img-responsive是一个类，因此您必须将其与.一起使用。 .img-responsive和.logo以及.landingpage属于同一个类，因此您应该删除这样的空格：

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

请参阅element element selector和And selector

中心标志响应两个班级

2 个答案: