需要同时显示页眉和图像
需要同时显示页眉和图像
提问于 2021-04-25 18:10:54
我正在尝试学习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标志。
你能给我引路吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-25 21:14:31
img和h1将一起呈现为块元素。您可以使包装div成为一个灵活的行容器，并居中对齐图像图标和标题标签。
.header {
display: flex;
flex-direction: row;
align-items: center;
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67256735
复制相关文章
相似问题
腾讯云开发者
