How to place one photo on the left edge and the other in the center of the page?-CodePudding

I have two image files and I want to arrange the two like the image but I don't know how...

HTML

<div >
        <img  src={ic_menu} alt="" />
        <img  src={logo_image} alt="" />
</div>

CSS

.header {
  display:flex;
  justify-content: center;
}

.header_logo {
    vertical-align:bottom;
    display:flex;
    width: 300px;
  align-items: flex-end
}

.header_menu {
  display:flex;
  vertical-align:bottom;
  text-align: left;
  width: 30px;
  height: 30px;
  align-items: flex-end;
}

CodePudding user response：

I would use float left for the logo, and hmm maybe position absolute will do better.

.header {
  display: flex;
  justify-content: center;
  position: relative;
  border: 1px solid red;
}

.header_logo {
  vertical-align: bottom;
  display: flex;
  width: 300px;
  align-items: flex-end
}

.header_menu {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 0;
  bottom: 0;
}

img {
  border: 1px solid yellow;
  height: 50px;
}

<div >
  <img  src={ic_menu} alt="" />
  <img  src={logo_image} alt="" />
  <div style="clear:both"></div>
</div>