Css 在React中使用样式化组件在图标旁边显示文本

对于React和使用样式化组件来说是个新概念，但我正在构建一个标题组件，它基本上有两个黑色条-顶部条（

StyledApplicationBanner

）包含徽标，然后（

StyledBackBar

）包含返回箭头（SVG）-我当前的代码在定位方面有我想要的一切，但我不确定如何使我的

`back

文本与箭头对齐？有人能提出实现这一目标的起点吗

import styled from "styled-components";
import icon from "./myicons-icon-light.png";
import arrow from "./arrow-left.svg";

const StyledApplicationBanner = styled.header`
  background: black;
  height: 64px;
  width: 100%;
  border-bottom: 1px solid rgb(151, 153, 155);
`;

const StyledBackBar = styled.div`
background: black;  
height: 48px;
width: 100%;
color: white;

p {
  color: white;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 16px;
  text-transform: uppercase;
}
`;

const Icon = styled.img`
  height: 22px;
  width: 116px;
  margin-top: 21px;
  margin-left: 96px;
`;

const Arrow = styled.img`
  height: 32px;
  width: 32px;
  margin-top: 8px;
  margin-left: 88px;
`
  return (

      <StyledApplicationBanner>
        <Icon src={icon} alt="Icon" />
      </StyledApplicationBanner>
      <StyledBackBar>
        <Arrow src={arrow} alt="Back arrow" />
        <p>Back</p>
      </StyledBackBar>

  );
};



export default ApplicationHeader;

从“样式化组件”导入样式化；
从“/myicons icon light.png”导入图标；
从“/arrow left.svg”导入箭头；
const StyledApplicationBanner=styled.header`
背景：黑色；
高度：64px；
宽度：100%；
边框底部：1px实心rgb（151153155）；
`;
const StyledBackBar=styled.div`
背景：黑色；
高度：48px；
宽度：100%；
颜色：白色；
p{
颜色：白色；
字体大小：12px；
字体大小：粗体；
字母间距：1px；
线高：16px；
文本转换：大写；
}
`;
常量图标=styled.img`
高度：22px；
宽度：116px；
利润上限：21px；
左边距：96px；
`;
常量箭头=styled.img`
高度：32px；
宽度：32px；
边缘顶部：8px；
左边距：88px；
`
返回(
背

);
};
导出默认的ApplicationHeader；

使用

显示：flex

和

对齐项目：居中

：

const StyledBackArrow = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
`;

...
<StyledBackArrow>
  <img />
  <span>Back</span>
</StyledBackArrow>
...

返回

您是否尝试添加

显示：flex

到

StyledBackBar

，这在理论上会使这两个项进入一行