Struggling to align an svg component at the center of a parent div element both vertically and horizontally using tailwind.css in a React project. Seeking feedback on my code below to identify any mistakes.
The current issue, as shown in the included png image, is that the svg icon is not centered within its parent div. Additionally, the parent div does not match the height of its sibling div elements in the row. Looking to address these two issues.
To visualize the improvement, refer to the second png image which showcases the desired outcome after implementing suggestions from Mr. Juliomalves.
https://i.sstatic.net/pao59.png https://i.sstatic.net/UOuPm.png
//index.js
import { RedToBlueCols } from "../components/cols";
export default function Home() {
return (
<RedToBlueCols width="120" height="60">
<div>
<p>red</p>
<p>red</p>
<p>red</p>
<p>red</p>
<p>red</p>
</div>
<div>
<p>blue</p>
<p>blue</p>
<p>blue</p>
<p>blue</p>
<p>blue</p>
</div>
</RedToBlueCols>
);
}
//cols.js
import { RedToBlue } from "./mysvg";
export function RedToBlueCols(props) {
return (
<div className="w-screen flex flex-wrap flex-row ">
<div className="w-2/12 "></div>
<div className="w-3/12 border-4">{props.children[0]}</div>
<div className="w-2/12 border-4 content-center h-full ">
<RedToBlue width="120" height="48"></RedToBlue>
</div>
<div className="w-3/12 border-4">{props.children[1]}</div>
<div className="w-2/12"></div>
</div>
);
}
//mysvg.js
import styles from "../styles/svg.module.css";
export function RedToBlue(props) {
const { height, width } = props;
return (
<span class={styles["svg-char"]}>
<svg
width={width}
height={height}
viewBox="0 0 30 6"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<title>RedToBlue</title>
<defs>
<linearGradient
id="gradRtoB"
x1="0"
y1="6"
x2="30"
y2="6"
gradientUnits="userSpaceOnUse"
spreadMethod="repeat"
>
<stop offset="30%" stopColor="#ff0000" stopOpacity="1" />
<stop offset="50%" stopColor="#ffff00" stopOpacity="1" />
<stop offset="70%" stopColor="#0000ff" stopOpacity="1" />
</linearGradient>
</defs>
<g fill="white">
<path
d="M0,0 l 5,3 l -5,3 h 25 l 5,-3 l -5,-3 z"
fill="url(#gradRtoB)"
/>
</g>
</svg>
</span>
);
}
//svg.module.css
.svg-char {
display: inline-block;
@apply border-2;
}