javascript - 需要并排显示页眉和图像

Question

我正在尝试学习 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 Logo 一样。

你能指导我吗？

Answer 1

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

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