Html/css Image Center Alignment

I have made a website where the homepage looks like the this : I want to move the ficstore logo in the middle and split the bar into two halves and put one on either side , like t

Solution 1:

This is a great time to use flex:

HTML:

<divclass='flex-row'><div><imgsrc="left.png"></div><div><imgsrc="center.png"></div><div><imgsrc="right.png"></div></div>

CSS:

.flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

Solution 2:

This is one way to do it. I would encourage you to ditch whatever framework you are using. col-x-whatever is bad news bears.

Here's a fiddle too - with an inline-block way.

https://jsfiddle.net/sheriffderek/fcwyg0zb/

inline-block

.images { 
  text-align: center;
}

.images.image-w {
  display: inline-block;
  vertical-align: middle;
}

flexbox

.image-wimg {
  display: block;
  width: 100%;
  height: auto;
}

.one {
  max-width: 200px;
}

.two {
  max-width: 400px;
  margin: 01rem;
}

.three {
  max-width: 200px;
}

.images {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

<sectionclass='images'><divclass='image-w one'><imgsrc='https://placehold.it/300x150'alt='left'></div><divclass='image-w two'><imgsrc='https://placehold.it/600x300'alt='center'></div><divclass='image-w three'><imgsrc='https://placehold.it/300x150'alt='right'></div></section>

Solution 3:

I suggest you have to have 3 images. The bar should divided in two. Put the Fictore in the middle then add display:block.