我还是CSS新手,希望问一些与react的样式化组件相关的问题。我正在使用display flex使和在同一行上对齐,但它没有做到这一点。第一个黄色突出显示部分是img和span组件
显示器Flex不工作,无法在同一条生产线上制作2件产品
pkmbmrz71#
也许你需要设置图像的display和position属性,你能试试吗?
display
position
<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); } `;
1条答案
按热度按时间pkmbmrz71#
也许你需要设置图像的
display
和position
属性,你能试试吗?