title: Close button not vertically centered in bootstrap react popover
body: <p>I am trying a simple popover and have added a close button, code as follows:</p>
  <pre><code>import React from 'react';
  import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
  import Button from 'react-bootstrap/Button';
  import Popover from 'react-bootstrap/Popover';
  
  const popover = (
      &lt;Popover className=&quot;mt-2&quot; id=&quot;popover-basic&quot;&gt;
          &lt;Popover.Title as=&quot;h3&quot;&gt;
              Popover right
              &lt;button type=&quot;button&quot; class=&quot;close&quot; style={{ width: '20', height: '20'}} aria-label=&quot;Close&quot;&gt;
                  &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/Popover.Title&gt;
          &lt;Popover.Content&gt;
              And here's some &lt;strong&gt;amazing&lt;/strong&gt; content. It's very engaging.
              right?
          &lt;/Popover.Content&gt;
      &lt;/Popover&gt;
  );
  
  
  const PopoverTest = () =&gt; {
      return (
          &lt;div className=&quot;text-center&quot;&gt;
              {/* Wrap in the trigger to get the target */}
              &lt;OverlayTrigger trigger=&quot;click&quot; placement=&quot;bottom&quot; overlay={popover}&gt;
                  &lt;Button className=&quot;mt-3 text-center&quot;&gt;Click me to see&lt;/Button&gt;
              &lt;/OverlayTrigger&gt;
          &lt;/div&gt;
          
      );
  };
  
  export default PopoverTest;
  </code></pre>
  <p>However the button is not centered vertically:</p>
  <p><a href="https://i.stack.imgur.com/jJg9k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jJg9k.png" alt="enter image description here" /></a></p>
  <p>How can I fix this?</p>