reactjs 如何在弹性框元素中对齐垂直文本

lvmkulzt 于 2023-05-28 发布在 React

关注(0)|答案(1)|浏览(508)

我一直在尝试创建垂直文本部分标题为我的网站上的每一节，但我一直很难尝试与其他组件对齐。我将标题和内容作为两个元素放在一个Flex框中。我想把标题放在它的flex元素的右上角，但我不知道如何实际做到这一点。
我听说origin-DIRECTION css类可以帮助解决这个问题，但当我尝试它时，它所做的只是将文本扔到flex框周围，有时它会通过其他组件进行剪辑。
Image of the problem; made background green for visibility.
下面是我的App组件中的代码。

<div className="flex my-[35vh]">
    <SectionCard name={"Projects"} />
    <Projects />
</div>

下面是我的SectionCard组件的代码。

export const SectionCard: React.FC<{ name: string }> = ({ name }) => {
    return (
        <div className="flex font-metropolis font-bold text-3xl items-center gap-8 -rotate-90">
            <div className="bg-black h-2 w-[10rem]"></div>
            <p>
                {name}  
            </p>
        </div>
    );
}

reactjs

来源：https://stackoverflow.com/questions/76345531/how-do-i-align-vertical-text-in-a-flex-box-element

1条答案

按热度按时间

pu3pd22g1#

1.使用flex box

您应该使用justify-content: end并删除item-center类

export const SectionCard: React.FC<{ name: string }> = ({ name }) => {
return (
    <div className="flex font-metropolis font-bold text-3xl gap-8 -rotate-90">
        <div className="bg-black h-2 w-[10rem]" style={{"justify-content":"end" ></div>
        <p>
            {name}  
        </p>
    </div>
);

}

2.使用仓位规则

只要去掉内部的flex和一些css的位置规则，比如绝对和相对就可以了。
我刚刚删除了类flex items-center gap-8

export const SectionCard: React.FC<{ name: string }> = ({ name }) => {
return (
    <div className="font-metropolis font-bold text-3xl -rotate-90" style={{"position":"relative"}}>
        <div className="bg-black h-2 w-[10rem]" style={{"position":"absolute","top":"0","right":"0","padding":"10px"></div>
        <p>
            {name}  
        </p>
    </div>
   );
}

赞(0）回复(0）举报 2023-05-28

我来回答

reactjs 如何在弹性框元素中对齐垂直文本

1条答案

相关问题

热门标签

最新问答