html < img/>并且< span>不使用显示器Flex对齐在一起

fkaflof6  于 2022-12-09  发布在  其他
关注(0)|答案(1)|浏览(126)

我还是CSS新手,希望问一些与react的样式化组件相关的问题。我正在使用display flex使和在同一行上对齐,但它没有做到这一点。
第一个
黄色突出显示部分是img和span组件

显示器Flex不工作,无法在同一条生产线上制作2件产品

pkmbmrz7

pkmbmrz71#

也许你需要设置图像的displayposition属性,你能试试吗?

<SignInGg><img src='images/google.svg' alt=''/><span>Sign in with Google</span></SignInGg>

const SignInGg = styled.a`
    font-weight: 600;
    color: rgba(0, 0, 0, 0.5);
    margin: 20px 0;
    padding: 15px 0;
    width: 35%;
    border: 2px solid rgba(0, 0, 0, 0.5);
    border-radius: 29px;
    white-space: nowrap;
    display: flex;
    flex-direction: column; // <- changed here
    align-items: center; // <- changed here
    justify-content: center; // <- changed here
    & img {
        width: 30px; 
        height: 30px; // <- changed here
        position: relative; // <- changed here
        display: inline-block; // <- changed here
    }
    &:hover {
        border: 2px solid rgba(0, 0, 0, 0.9);
        background-color: rgba(0, 0, 0, 0.1);
    }
`;

相关问题