Jump to content

margin-left:auto not working


newcoder1010
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...