div中图像顶部的徽标没有响应答案

【问题标题】：logo on top of image in div not responsivediv中图像顶部的徽标没有响应
【发布时间】：2019-11-26 20:37:54
【问题描述】：

我有一个 div 容器，其中有一个 div 作为背景图像，一个 img 标签作为徽标，用于重叠背景图像。

const SignIn = () => (
<div style={{display:'flex'}}>
  <div style={{flex:2}}>
    <ImageDiv bg={signin} src = {signin} alt="logo" />
    <LogoDiv src={logo} alt="logo" />
  </div>

Imagediv.jsx

import styled from 'styled-components';

const ImageDiv = styled.div`
  background-image: url(${(props) => props.bg}), url(${(props) => props.bg}); 
  height: 100%;
  width: 100%;
  float: left;
  position: relative;
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;
`
export default ImageDiv;

logoDiv.jsx

import styled from 'styled-components';

const LogoDiv = styled.img`
src: url(${(props) => props.bg});
width: 200px;
height: 108px;
position: absolute;
left: 175px;
right: 175px;
bottom: 106px;
z-index: 1;
`;

export default LogoDiv;

我会在屏幕大小和显示明显差异时附加屏幕，我需要帮助我解决即使屏幕变小的徽标仍保留在 div 中下部的问题

【问题讨论】：

这更像是一个css问题而不是react，如果你只用css/html编写一个sn-p代码，调试起来会更容易
我用 styled-components 做 css，所以所有用到的 css 都已经附加了
你可以使用 flexbox 轻松解决这个问题。对包含徽标的 div 使用 display:flex 和 align-items:center。
@SImonHaddad 运行代码后，您可以从 devtools 中提取 css

标签： css reactjs responsive styled-components

【解决方案1】：

使用 justify-content: center;应用 display:flex 的地方。所以徽标将保持在中心位置。

【讨论】：