1

I administrative a site where there is a logo which is left aligned.

The HTML and CSS for that logo is looking like this:

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
}

I have to make a Landingpage where the logo is centered. Therefore I thought on my landingpage I could do like so:

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

is that incorrect?

Ne Kr
  • 208
  • 1
  • 4
  • 21

2 Answers2

0

To select a multi-class event, remove the spaces between the class selectors:

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

margin: 0 auto; is a good way to center a block-level element that is smaller than it's container element. However depending on your markup you may want to use text-align: center; on the parent.

andreas
  • 16,357
  • 12
  • 72
  • 76
  • Thank you for the comment. The HTML should still be: class="landingpage img-responsive logo, right? – Ne Kr Aug 17 '16 at 15:21
  • It is still not working, so maybe there is some inherit. Could a hack be to make a new logo img, and then use my css for this? I just set a border around the logo in the same class, and that is comming fine. But the logo is still not centered. – Ne Kr Aug 17 '16 at 15:30
  • Yes in the HTML attribute, the classes are space seperated `class="landingpage img-responsive logo"`. To really help you and identify the problem, we need to see an example page with your whole markup – andreas Aug 17 '16 at 16:00
0

img-responsive is a class, therefore you must use it with a . . .img-responsive and .logo and .landingpage are in the same class so you should remove space like this : 

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

See the element element selector and the And selector

Community
  • 1
  • 1
ElChapo
  • 228
  • 3
  • 13
  • Thank you for the comment. The HTML should still be: class="landingpage img-responsive logo, right? – Ne Kr Aug 17 '16 at 15:28
  • Yes, but if it's not working you may check if an other css property took down this one. – ElChapo Aug 18 '16 at 06:58