Today, I made the decision to venture into ReactJS and begin creating my own blog. One of the challenges I faced was trying to add text on an image in the header - only to find that the text kept sliding down. In order to ensure proper alignment, I needed the text position to be centered
[image] 1
Here is the code snippet:
Header.tsx
import React from "react";
import './header.scss'
const Header = () => {
return (
<header>
<div className = "head-text">
<div className = "head-image">
<img src = {require ('../ images / Header.png')} alt = "Freedom Blog" />
</div>
<h3> Welcome to my Blog </h3>
<p> FREEEEDOM </p>
</div>
</header>
)
}
export default Header;
Main App file:
import React from 'react';
import Header from './components/Header';
import './index.scss'
const App = () => {
return (
<>
<Header />
</>
);
}
export default App;
The CSS files are currently empty, so they have not been included.