margin-left:auto not working

[newcoder1010]

Hi,

 

Below margin-left and margin-right auto is not working. I just want to put the logo in the center. Can you help?

<section id="block-block-13" class="block block-block M-logo col-md-12  col-xs-12  contextual-links-region clearfix">

   <div class="contextual-links-wrapper contextual-links-processed">
          <a class="contextual-links-trigger" href="#">Configure</a><ul class="contextual-links"><li class="block-configure first last">
          <a href="/dcyacht/?q=admin/structure/block/manage/block/13/configure&destination=node/49">Configure block</a></li></ul>
    </div>
          <a class="M-logo-a" href="/" title="Home">
               <img src="sites/img/Mobile-DC-Yacht-Logo.png" alt="Home">
           </a>

</section>

CSS:

	   .M-logo .M-logo-a  {     margin-left: auto; margin-right:auto; width:200px; }

Thanks.

[dsonesuk]

Its a inline element, width/height does not work with inline elements, only block elements so use display: block; or inline-block;

[newcoder1010]

I am not understanding. I am trying to put the logo in the center. How display: block will put the logo in the center?

 

Margin-left:10px; works but auto does not work.

Edited January 30, 2016 by newcoder1010

[newcoder1010]

If you could visit my site. Please make sure the screen less than 768px. This is for mobile.

http://godrupal.info/dcyacht/

Edited January 30, 2016 by newcoder1010

[dsonesuk]

A ANCHOR 'a' as in <a class="M-logo-a" href="/" title="Home"> <img src="sites/img/Mobile-DC-Yacht-Logo.png" alt="Home"></a> IS A INLINE ELEMENT, INLINE ELEMENTS DO NOT TAKE HEIGHT OR WIDTH, YOU NEED A WIDTH TO USE MARGIN-LEFT: AND MARGIN-RIGHT AUTO. THEREFORE IT WILL NOT WORK. IT JUST ACTS AS TEXT WOULD, TO CENTER TEXT YOU WOULD USE TEXT-ALIGN: CENTER; ON THE PARENT BLOCK ELEMENT.

[newcoder1010]

Many thanks. Now it worked.