CODEWITHSUNDEEP
cssreactjssvgnext.jstailwind-css
skatori
skatori

Reputation: 597

How to put content center vertically and horizontally with tailwind.css in React, Next.js?

I am trying to put an svg component at the center of a parent div element vertically and horizontally using tailwind.css in a React, Next.js project. Please let me know where is wrong of my code bellow.

For the current result shown in the pasted png bellow, the svg icon isn't at the center of its parent div element. In addition, the parent div does not have the same height as the sibling div elements of the row. I want to fix these two problems. The second pasted png shows the new better result after I followed Mr.Juliomalves's answer.

enter image description here enter image description here

//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;
}

Upvotes: 2

Views: 10997

Answers (1)

juliomalves
juliomalves

Reputation: 50278

To center all children horizontally you could add place-items-center on your top most <div>, then to center the SVG within its parent container simply apply flex and place-content-center to the container.

<div className="w-screen flex flex-wrap flex-row place-items-center">
    <!-- -->
    <div className="flex place-content-center w-2/12 border-4 h-full"><!-- SVG container -->
        <!-- -->
    </div>
    <!-- -->
</div>

Upvotes: 6

Related Questions