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

Question

我有一个div容器，该容器具有一个div作为背景图片和一个img标签作为徽标，用于覆盖背景图片。

signin，jsx

Need to re-download file. Proceed (y/n)? y
RETRY is y
Retrying download now
Press any key to continue . . .

Imagediv.jsx

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

logoDiv.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;

当屏幕变大并显示出明显的区别时，我会附加屏幕，即使屏幕变小，我也需要有关如何将徽标保留在div的较低中间的帮助。

Answer 1

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