需要并排显示页眉和图像

如何解决需要并排显示页眉和图像

我正在尝试学习 React js 并构建我的第一个应用程序。我是前端开发的新手。我想要我的页面的标题就像 StackOverflow 网站一样，在“堆栈溢出”的左侧，我们有一个图像（在此页面的左上角）（另一个例子是 youtube，我们有一个播放按钮，就在文本“youtube”的左侧）。

我创建了一个 Header.js 如下

import React from 'react'
import './Home.css'
import logo from '../images/company-logo.svg';

const Header = () => {

  return (    <div className="header">
    <img src={logo} />
    <h1>My App</h1>

  </div>)

}
export default Header

下面是我的 App.js

import React from 'react'
import Header from './Header'

const App = () => {

  return (
      <div>
        <Header />
      </div>
    )
  }

export default App

下面是 Home.css

.header {
  position: relative;
  background-color: #8d59c0;;
  padding: 30px 27px;
  color: #fff;
}

我能够看到图像和标题“我的应用程序”，但它们是垂直的，就像顶部和下面的图像一样（假设是另一行）我看到了标题。我需要并排的，就像左上角的 StackOverflow 标志一样。

你能指导我吗？

解决方法

img 和 h1 一起将呈现为块元素。您可以将包装 div 设为 flex 行容器，并将图像图标和标题标签居中对齐。

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
}