title: styling titles in react-image-gallery
body: <p>I am using react-image-gallery to have a slideshow on my webpage.
  I am fetching the data from a json file that looks like this.</p>
  <pre><code>&quot;pastdogs&quot;: [
      {
        
        &quot;description&quot;: &quot; Buddy, Dog given to the king of England&quot;,
        &quot;original&quot;: &quot;./puppies/firstday.jpg&quot;
      },
  
  </code></pre>
  <p>This is working fine, both the image and the description are showing up. The issue is the description is awkwardly on the side of the gallery.
  <a href="https://i.stack.imgur.com/J2KYm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J2KYm.jpg" alt="on the side" /></a></p>
  <p>I am wanting to make the description in the middle of the image, and preferably on the top.
  I can manipulate the entire gallery by using a wrapping a div around the component</p>
  <pre><code>&lt;div className=&quot;container-fluid slider&quot;&gt;
        &lt;ImageGallery
          className=&quot;&quot;
          items={pastdogs}
          showFullscreenButton={false}
          autoplay={true}
        &gt;&lt;/ImageGallery&gt;
      &lt;/div&gt;
      
  </code></pre>
  <pre><code>.slider {
    width: 50% !important;
  }
  </code></pre>
  <p>This reduces the size of the entire gallery, which is not ideal.
  How do I change only the description element?
  Thank you for your help and expertise.</p>