如何在React、Next.js中使用tailwind.css垂直和水平放置资源中心?
我试图在React、Next.js项目中使用tailwind.css将svg组件垂直和水平放置在父div元素的中心。请让我知道我下面的代码哪里错了 对于粘贴的png文件中显示的当前结果,svg图标不在其父div元素的中心。此外,父div与行的同级div元素的高度不同。我想解决这两个问题。 在我遵循Juliomalves先生的答案后,第二个粘贴的png显示了新的更好的结果如何在React、Next.js中使用tailwind.css垂直和水平放置资源中心?,css,reactjs,svg,next.js,tailwind-css,Css,Reactjs,Svg,Next.js,Tailwind Css,我试图在React、Next.js项目中使用tailwind.css将svg组件垂直和水平放置在父div元素的中心。请让我知道我下面的代码哪里错了 对于粘贴的png文件中显示的当前结果,svg图标不在其父div元素的中心。此外,父div与行的同级div元素的高度不同。我想解决这两个问题。 在我遵循Juliomalves先生的答案后,第二个粘贴的png显示了新的更好的结果 要使所有子对象水平居中,您可以在最顶端的上添加放置项目中心,然后将SVG置于其父容器的中心,只需将flex和放置资源中心应
要使所有子对象水平居中,您可以在最顶端的
上添加放置项目中心
,然后将SVG置于其父容器的中心,只需将flex
和放置资源中心
应用于容器即可
感谢您宝贵的回答。它部分解决了我的问题。请给出另一个答案来解决它。或者你希望我能把你的答案应用到剩下的问题上吗?我的答案没有解决什么问题?@skatori哦,我现在在你的问题中看到了更新的图片。您只需将place content center
添加到SVG容器中即可-请参阅我的更新答案。
//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;
}