如何在 React、Next.js 中使用 tailwind.css 垂直和水平放置内容中心？

Posted 2023-03-07

【中文标题】如何在 React、Next.js 中使用 tailwind.css 垂直和水平放置内容中心？

【英文标题】：How to put content center vertically and horizontally with tailwind.css in React, Next.js?

【发布时间】：2021-04-19 09:08:21

【问题描述】：

我正在尝试在 React,Next.js 项目中使用 tailwind.css 将 svg 组件垂直和水平放置在父 div 元素的中心。请让我知道我的代码哪里出了问题。

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

//index.js

import RedToBlueCols from '../components/cols'


export default function Home() 
  return (
<RedToBlueCols  >
<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  ></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;
  

【参考方案1】：

要使所有子级水平居中，您可以在最顶部的 <div> 上添加 place-items-center，然后将 SVG 在其父容器中居中，只需将 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>

【讨论】：

感谢您的宝贵回答。它部分解决了我的问题。请给出另一个答案来解决它。还是您希望我可以将您的答案应用于其余问题？

@skatori 哦，我现在在您的问题中看到了更新的图像。您可以简单地将 place-content-center 添加到 SVG 容器中 - 请参阅我的更新答案。