title: How to add text on image in ReactJS?
body: <p>I am learning ReactJS. Today I decided to create my own blog. Header needs image with some text. And when trying to add text on image, text slides down. I need to my text position to be at center</p>
  <p>[image] <a href="https://i.stack.imgur.com/ZbbMK.jpg" rel="nofollow noreferrer">1</a></p>
  <p>Code:</p>
  <p>Header.tsx</p>
  <pre><code>import React from &quot;react&quot;;
  import './header.scss'
  
  const Header = () =&gt; {
    return (
      &lt;header&gt;
        &lt;div className = &quot;head-text&quot;&gt;
          &lt;div className = &quot;head-image&quot;&gt;
            &lt;img src = {require ('../ images / Header.png')} alt = &quot;Freedom Blog&quot; /&gt;
          &lt;/div&gt;
            &lt;h3&gt; Welcome to my Blog &lt;/h3&gt;
            &lt;p&gt; FREEEEDOM &lt;/p&gt;
        &lt;/div&gt;
      &lt;/header&gt;
    )
  }
  
  
  export default Header;
  </code></pre>
  <p>Header.tsx</p>
  <pre><code>import React from 'react';
  import Header from './components/Header';
  import './index.scss'
  
  const App = () =&gt; {
    return (
      &lt;&gt;
        &lt;Header /&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>CSS files are empty, so I didn't add them.</p>