title: Center Facebook "Send to Messenger" button and text
body: <p>Is there a way to center the "Send to Messenger" button so it will be centered with the "Logged in as" text?</p>
  
  <p>This kind of having a negative effect on the user experience with our mobile UI, and we've tried all kinds of CSS tricks with no success.</p>
  
  <p>I understand that iframe's CSS may only be altered with JS if the iframe is loading from within the same domain, so its not a possible fix as well.</p>
  
  <p>FB default:
  <a href="https://i.stack.imgur.com/1sRde.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1sRde.png" alt="Default"></a></p>
  
  <p>We want it like this:
  <a href="https://i.stack.imgur.com/2v9XG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2v9XG.png" alt="Centered button and text"></a></p>
  
  <pre><code>.text-center {
  text-align: center;
  }
  
  .btn-send-fb {
     width: 180px;
     margin: 0 auto;
  }
  
  
  &lt;div class=“text-center btn-send-fb”&gt;
             &lt;div class=“fb-send-to-messenger”
                  data-messenger_app_id=“1000000000000”
                  data-page_id=“1000000000000"
                  data-color=“blue”
                  data-size=“xlarge”
                  data-cta_text=“SEND_THIS_TO_ME”&gt;
             &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas?</p>