如何将内容中心垂直和水平地与tailwind.css反应，Next.js？

Question

我试图将svg组件垂直和水平地放置在父div元素的中心，在React，Next.js项目中使用Next.js。请告诉我我的代码哪里出错了。

对于粘贴的png下面显示的当前结果，svg图标不在其父div元素的中心。此外，父div不具有与行的同级div元素相同的高度。我想解决这两个问题。第二个粘贴的png显示了在我跟随Mr.Juliomalves先生的回答之后的新的更好的结果。

​

​

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

Answer 1

要将所有子程序水平地居中，您可以在最上面的place-items-center上添加<div>，然后在其父容器中将flex和place-content-center应用到容器中。

<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>